Flux

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.

TIP

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

INFO

The legend exposes the ARIA list role and its items are listitems. The legend is a single tab stop: Tab moves focus into it, and the arrow keys move between items. Focusing an item drives the same hover synchronization as the mouse, so the linked chart or percentage bar highlights when a legend item is focused with the keyboard.

Props

variant?: detailed | compact
The visual style of the legend. `detailed` is the default chart legend; `compact` renders a condensed color dot and label, optionally with an icon and value.
Default: detailed

direction?: horizontal | vertical
The direction of the legend items. Only applies to the `compact` variant.
Default: horizontal

Slots

default
The legend items.

Examples ​

Basic

A legend with two series using a color swatch.

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

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

With icons

Set the icon prop to replace the color swatch with an icon.

<template>
    <FluxStatisticsLegend>
        <FluxStatisticsLegendItem
            icon="money-bill"
            label="Revenue"
            value="€ 48,290"/>
        <FluxStatisticsLegendItem
            icon="cart-shopping"
            label="Orders"
            value="3,821"/>
        <FluxStatisticsLegendItem
            icon="users"
            label="Customers"
            value="1,204"/>
    </FluxStatisticsLegend>
</template>

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

Mixed

Color swatches and icons can be combined within a single legend.

<template>
    <FluxStatisticsLegend>
        <FluxStatisticsLegendItem
            color="primary"
            label="Revenue"
            value="€ 48,290"/>
        <FluxStatisticsLegendItem
            color="success"
            label="Profit"
            value="€ 12,840"/>
        <FluxStatisticsLegendItem
            icon="cart-shopping"
            label="Orders"
            value="3,821"/>
        <FluxStatisticsLegendItem
            icon="users"
            label="Customers"
            value="1,204"/>
    </FluxStatisticsLegend>
</template>

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

Compact

The compact variant renders a condensed color dot and label, ideal for use outside of a chart.

<template>
    <FluxStatisticsLegend variant="compact">
        <FluxStatisticsLegendItem
            color="primary"
            label="Components"/>
        <FluxStatisticsLegendItem
            color="#10b981"
            label="Dashboard"/>
        <FluxStatisticsLegendItem
            color="#3b82f6"
            label="Internals"/>
        <FluxStatisticsLegendItem
            color="#f59e0b"
            label="Types"/>
    </FluxStatisticsLegend>
</template>

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

Compact vertical

Set direction to vertical to stack a compact legend.

<template>
    <FluxStatisticsLegend
        variant="compact"
        direction="vertical">
        <FluxStatisticsLegendItem
            color="primary"
            label="Components"/>
        <FluxStatisticsLegendItem
            color="#10b981"
            label="Dashboard"/>
        <FluxStatisticsLegendItem
            color="#3b82f6"
            label="Internals"/>
        <FluxStatisticsLegendItem
            color="#f59e0b"
            label="Types"/>
    </FluxStatisticsLegend>
</template>

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

Compact with icons

The compact variant also supports icons and values.

<template>
    <FluxStatisticsLegend variant="compact">
        <FluxStatisticsLegendItem
            icon="chart-line"
            label="Sessions"
            value="8,402"/>
        <FluxStatisticsLegendItem
            icon="cart-shopping"
            label="Orders"
            value="3,821"/>
        <FluxStatisticsLegendItem
            icon="users"
            label="Customers"
            value="1,204"/>
    </FluxStatisticsLegend>
</template>

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

Used components ​