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