Flux

Appearance

Percentage bar ​

The percentage bar visualizes the proportional breakdown of a collection of items as a single horizontal segmented bar. Each segment can carry an optional icon and label, and integrates with the statistics legend context to provide bidirectional hover synchronization when wrapped in a FluxStatisticsLegendScope.

Expenses at each store

Props

items: FluxStatisticsPercentageBarItemObject[]
The items of the percentage bar.

Examples ​

Scoped with legend

A percentage bar wrapped in a legend scope together with a statistics legend, demonstrating bidirectional hover sync.

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

<template>
    <FluxStatisticsBase
        icon="store"
        title="Expenses at each store">
        <FluxStatisticsLegendScope>
            <FluxFlex
                direction="vertical"
                :gap="18">
                <FluxStatisticsPercentageBar :items="items"/>
                <FluxStatisticsLegend/>
            </FluxFlex>
        </FluxStatisticsLegendScope>
    </FluxStatisticsBase>
</template>

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

    const items: FluxStatisticsPercentageBarItemObject[] = [
        { label: 'Aldi', color: '#00529B', icon: 'store', value: 0.25, displayValue: '25%' },
        { label: 'Albert Heijn', color: '#00A1E4', icon: 'store', value: 0.1, displayValue: '10%' },
        { label: 'Jumbo', color: '#FFD700', icon: 'store', value: 0.5, displayValue: '50%' },
        { label: 'Plus', color: '#6BA539', icon: 'store', value: 0.1, displayValue: '10%' },
        { label: 'Other', color: '#CBD5E1', icon: 'store', value: 0.05, displayValue: '5%' }
    ];
</script>

Used components ​