Flux

Appearance

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.

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.

This year
Last year

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

Electronics38%
Clothing27%
Books20%
Other15%

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

Revenue€ 48,290
Orders3,821
Customers1,204

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

Revenue€ 48,290
Profit€ 12,840
Orders3,821
Customers1,204

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

Components
Dashboard
Internals
Types

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

Components
Dashboard
Internals
Types

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

Sessions8,402
Orders3,821
Customers1,204

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