Overlay group

View in GitHub

Overlay groups orchestrate all the overlay rectangles that a chart needs to show. These will be the hoverable surfaces that will highlight individual values or value sets in the chart.

Usage

Importing

import { LumeOverlayGroup } from '@adyen/lume';

Basic use

To generate a simple overlay group with default settings, simply pass the data prop.

<template>
  <lume-overlay-group :data="data" />
</template>

<script
  lang="ts"
  setup
>
  import { LumeOverlayGroup } from '@adyen/lume';
  import { ref } from 'vue';

  const data = ref([
    {
      values: [10, 30, 20, 50, 40],
    },
  ]);
</script>

API

Props

Name	Type	Default	Description
`data`	`Data`	Required	The data to plot.
`orientation`	`String`	`'vertical'`	Must be either `'horizontal'` or `'vertical'`
`xScale`	`ScaleGenerator` or `ScaleBand<string>` or `ScaleBand<number>`	`null`	A d3 scale or a scale generator function to override the default X scale.
`yScale`	`ScaleGenerator` or `ScaleLinear<number, number>`	`null`	A d3 scale or a scale generator function to override the default Y scale.

Events

`click`

Fired upon clicking an overlay bar.

Payload

p: {
  index: number; // Index of the bar that was clicked.
  event: PointerEvent; // Native `click` event data.
}