Legends

Legend Visibility

The legend is shown by default. You can hide it by setting the hideLegend prop to true.

<LineChart :hide-legend="true" />

Legend Positioning

Control the legend's position using the legendPosition prop. Supported values:

• topLeft
• topCenter
• topRight
• bottomLeft
• bottomCenter
• bottomRight

The legend is rendered above or below the chart depending on the position. The component uses computed properties to determine flex direction and alignment.

<LineChart :legend-position="LegendPosition.TopRight" />

Legend Styling

Customize the legend's appearance with the legendStyle prop, which accepts a style object. The legend also uses the CSS variable --vis-legend-spacing for spacing between items.

<LineChart :legend-style="{ background: '#fff', borderRadius: '8px' }" />

Legend Spacing Variable

You can customize the spacing around the chart legend using the --vis-legend-spacing CSS variable. This controls the margin or padding applied to the legend area.

Example:

:root {
    --vis-legend-spacing: 16px;
}

Adjust the value as needed to fit your design.

Legend Items

Each legend item corresponds to a category in the categories prop. The color for each item is taken from the category's color property. If the color is an array, only the first color is used for the legend bullet.

const categories = {
    sales: { name: 'Sales', color: '#22c55e' },
    profit: { name: 'Profit', color: ['#3b82f6', '#a21caf'] },
}

Example Usage

<LineChart
    :categories="categories"
    legend-position="bottomCenter"
    :legend-style="{ padding: '8px' }"
/>

Summary Table