Donut chart

The donut chart renders a hollow pie chart. Tooltips and the legend are hidden by default; use a Legend to display series labels alongside the chart.

Traffic sources

Organic44

Direct28

Referral18

Social10

TIP

This component is best used inside a Chart pane.

Props

slices: FluxStatisticsChartPieSlice[]
The donut slices to render.

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

In a chart pane

A donut chart inside a chart pane with matching colors and a legend.

Preview

Traffic sources

Organic44

Direct28

Referral18

Social10

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Traffic sources"
        :aspect-ratio="1.5">
        <FluxStatisticsDonutChart :slices="slices"/>

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

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

    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 icons

A donut chart whose slices carry icons that surface in the legend and tooltip.

Preview

Devices

Desktop52

Mobile36

Tablet12

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Devices"
        :aspect-ratio="1.5">
        <FluxStatisticsDonutChart :slices="slices"/>

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

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Desktop', value: 52, color: 'primary', icon: 'desktop' },
        { label: 'Mobile', value: 36, color: 'info', icon: 'phone' },
        { label: 'Tablet', value: 12, color: 'warning', icon: 'tablet' }
    ];
</script>

Minimal

A focused two-slice donut chart without a legend.

Preview

Disk usage

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Disk usage"
        :aspect-ratio="1.5">
        <FluxStatisticsDonutChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Used', value: 78, color: 'primary' },
        { label: 'Free', value: 22, color: 'gray' }
    ];
</script>

With tooltip

Enable the hover tooltip by setting the `tooltip` prop.

Preview

Traffic sources

Organic44

Direct28

Referral18

Social10

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Traffic sources"
        :aspect-ratio="1.5">
        <FluxStatisticsDonutChart
            tooltip
            :slices="slices"/>

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

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

    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>