Bar

This component is meant to render bar-like elements. It is used mainly by Bar charts, but also to draw rectangle shapes, such as the gray area in a negative domain chart.

Usage

Importing

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

Basic use

This component essentially renders an SVG <rect> element. To do so, it requires a width and height value.

<lume-bar
  :width="20"
  :height="80"
/>

API

Props

Name Type Default Description
width number Required Width of the bar.
height number Required Height of the bar.
x number 0 Horizontal position of the bar.
y number 0 Vertical position of the bar.
classList string | Array<string> "" A CSS class or array of classes to add to the bar.
isFaded boolean false Controls the opacity of the bar.
isNegative boolean false True if the bar is representing a negative value.
transition "width" | "height" | false false Indicates which property is going to be transitioned.

Events

click

Fired upon bar rectangle click.

Payload
p: PointerEvent;

mouseover

Fired upon bar rectangle mouseover.

Payload
p: MouseEvent;

mouseleave

Fired upon bar rectangle mouseleave.

Payload
p: MouseEvent; // Native `mouseleave` event data.