Flux

Appearance

Legend scope ​

The legend scope is a renderless wrapper that provides a shared chart legend context to its children. It lets you pair any chart or statistics component with a FluxStatisticsLegend outside of a FluxStatisticsChartPane, while still benefiting from bidirectional hover synchronization between the data visualization and its legend.

FluxStatisticsChartPane uses this wrapper internally, so any direct usage of the scope mirrors the same behavior.

Expenses at each store
Aldi25%
Albert Heijn10%
Jumbo50%
Plus10%
Other5%

Slots

default
The components that should share a single legend context.

Examples ​

With a donut chart

A donut chart paired with a statistics legend in a custom layout, sharing hover state through the scope.

Traffic sources
Organic44
Direct28
Referral18
Social10

<template>
    <FluxStatisticsBase
        icon="chart-pie"
        title="Traffic sources">
        <FluxStatisticsLegendScope>
            <FluxFlex
                align="center"
                direction="horizontal"
                :gap="18">
                <div style="position: relative; aspect-ratio: 1; flex: 0 0 180px">
                    <FluxStatisticsDonutChart :slices="slices"/>
                </div>

                <FluxStatisticsLegend/>
            </FluxFlex>
        </FluxStatisticsLegendScope>
    </FluxStatisticsBase>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
    import { FluxStatisticsBase, FluxStatisticsDonutChart, FluxStatisticsLegend, FluxStatisticsLegendScope } from '@flux-ui/statistics';
    import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Organic', value: 44, color: 'primary' },
        { label: 'Direct', value: 28, color: '#10b981' },
        { label: 'Referral', value: 18, color: '#3b82f6' },
        { label: 'Social', value: 10, color: '#f59e0b' }
    ];
</script>

With a pie chart

A pie chart with icons paired with a statistics legend outside of a chart pane.

Sales by category
Electronics38
Clothing27
Books20
Other15

<template>
    <FluxStatisticsBase
        icon="chart-pie"
        title="Sales by category">
        <FluxStatisticsLegendScope>
            <FluxFlex
                align="center"
                direction="horizontal"
                :gap="18">
                <div style="position: relative; aspect-ratio: 1; flex: 0 0 180px">
                    <FluxStatisticsPieChart :slices="slices"/>
                </div>

                <FluxStatisticsLegend/>
            </FluxFlex>
        </FluxStatisticsLegendScope>
    </FluxStatisticsBase>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex } from '@flux-ui/components';
    import { FluxStatisticsBase, FluxStatisticsLegend, FluxStatisticsLegendScope, FluxStatisticsPieChart } from '@flux-ui/statistics';
    import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Electronics', value: 38, color: 'primary', icon: 'laptop' },
        { label: 'Clothing', value: 27, color: '#10b981', icon: 'shirt' },
        { label: 'Books', value: 20, color: '#3b82f6', icon: 'book' },
        { label: 'Other', value: 15, color: '#f59e0b', icon: 'cubes' }
    ];
</script>

Used components ​