Legend

The statistics legend groups Legend items together, providing a visual key that maps colors or icons to the data series displayed in a chart.

Revenue€ 48,290

Orders3,821

New users1,204

TIP

This component is best used within a Chart pane via the legend slot.

Slots

default
The legend items.

Examples

Basic

A legend with two series using a color swatch.

Preview

This year

Last year

Code

<template>
    <FluxStatisticsLegend>
        <FluxStatisticsLegendItem
            color="primary"
            label="This year"/>
        <FluxStatisticsLegendItem
            color="#10b981"
            label="Last year"/>
    </FluxStatisticsLegend>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsLegend, FluxStatisticsLegendItem } from '@flux-ui/statistics';
</script>

With values

Legend items that include a percentage value alongside the label.

Preview

Electronics38%

Clothing27%

Books20%

Other15%

Code

<template>
    <FluxStatisticsLegend>
        <FluxStatisticsLegendItem
            color="primary"
            label="Electronics"
            value="38%"/>
        <FluxStatisticsLegendItem
            color="#10b981"
            label="Clothing"
            value="27%"/>
        <FluxStatisticsLegendItem
            color="#3b82f6"
            label="Books"
            value="20%"/>
        <FluxStatisticsLegendItem
            color="#f59e0b"
            label="Other"
            value="15%"/>
    </FluxStatisticsLegend>
</template>

<script
    setup
    lang="ts">
    import { FluxStatisticsLegend, FluxStatisticsLegendItem } from '@flux-ui/statistics';
</script>

Used components

• Item