Radial bar

The radial bar chart renders one or more percentage values as concentric circular rings. It is the circular counterpart of the Meter widget and works well as a single-value gauge or a small dashboard ring.

Quota usage

TIP

This component is best used inside a Chart pane.

Props

series: FluxStatisticsChartGaugeSeries[]
The gauge rings to render. Each entry produces a concentric ring with its own value and color.

tooltip?: boolean
Show a tooltip on hover. Disabled by default.

advanced-options?: EChartsOption
Escape-hatch for raw ECharts options merged on top of the Flux defaults.

Examples

Single value

A single radial ring for one percentage value.

Preview

Tasks complete

Code

<template>
    <FluxStatisticsChartPane
        icon="circle-check"
        title="Tasks complete"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar :series="series"/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'Done', value: 84 }
    ];
</script>

Multiple values

Multiple concentric radial bars for related metrics.

Preview

Subsystem health

Code

<template>
    <FluxStatisticsChartPane
        icon="gauge-high"
        title="Subsystem health"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar :series="series"/>

        <template #legend>
            <FluxStatisticsLegend/>
        </template>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'API', value: 92 },
        { name: 'DB', value: 78 },
        { name: 'Workers', value: 64 }
    ];
</script>

Custom labels

A radial bar with a custom total label in the center.

Preview

Goal progress

Code

<template>
    <FluxStatisticsChartPane
        icon="circle"
        title="Goal progress"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar :series="series"/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'Average', value: 63 }
    ];
</script>

With icons

A radial bar whose rings carry icons that surface in the legend.

Preview

Service health

Code

<template>
    <FluxStatisticsChartPane
        icon="gauge-high"
        title="Service health"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar :series="series"/>

        <template #legend>
            <FluxStatisticsLegend/>
        </template>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'API', value: 94, color: 'success', icon: 'server' },
        { name: 'Database', value: 82, color: 'info', icon: 'database' },
        { name: 'Storage', value: 68, color: 'warning', icon: 'hard-drive' }
    ];
</script>

Two rings

A compact radial bar with two concentric rings.

Preview

Sprint progress

Code

<template>
    <FluxStatisticsChartPane
        icon="gauge-high"
        title="Sprint progress"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar :series="series"/>

        <template #legend>
            <FluxStatisticsLegend/>
        </template>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsLegend, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'Stories', value: 76 },
        { name: 'Tasks', value: 88 }
    ];
</script>

With tooltip

Enable the hover tooltip by setting the tooltip prop.

Preview

Quota usage

Code

<template>
    <FluxStatisticsChartPane
        icon="gauge-high"
        title="Quota usage"
        :aspect-ratio="1.4">
        <FluxStatisticsRadialBar
            tooltip
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsRadialBar } from '@flux-ui/statistics';

    const series: FluxStatisticsChartGaugeSeries[] = [
        { name: 'Used', value: 72 }
    ];
</script>