Overlay group
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.
}