Flux

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

TIP

Negative item values are clamped to 0, so a malformed data point never renders as a reversed or overlapping segment.

INFO

The bar exposes the ARIA img role with an aria-label summarizing each segment as a percentage and label, so the breakdown is available to assistive technologies without relying on the visual segments.

Props

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

Examples ​

Basic

A standalone percentage bar using semantic Flux color tokens.

Traffic sources

<template>
    <FluxStatisticsBase
        style="min-width: 100%; max-width: 420px"
        icon="chart-pie"
        title="Traffic sources">
        <FluxStatisticsPercentageBar :items="items"/>
    </FluxStatisticsBase>
</template>

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

    const items: FluxStatisticsPercentageBarItemObject[] = [
        { label: 'Organic', color: 'primary', value: 0.48 },
        { label: 'Direct', color: 'success', value: 0.24 },
        { label: 'Referral', color: 'info', value: 0.16 },
        { label: 'Social', color: 'warning', value: 0.08 },
        { label: 'Other', color: 'gray', value: 0.04 }
    ];
</script>

Scoped with legend

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

Expenses at each store

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