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

series: ApexOptions['series']
The data series for the chart, compatible with the ApexCharts series format.

aspect-ratio?: number
The aspect ratio of the chart.

options?: ApexOptions
Additional ApexCharts options to merge with the 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
            :options="{
                colors: ['var(--primary-600)', '#10b981', '#3b82f6', '#f59e0b'],
                grid: {padding: {top: 21, left: 15, right: 15, bottom: 15}},
                labels: ['Organic', 'Direct', 'Referral', 'Social']
            }"
            :series="[44, 28, 18, 10]"/>

        <template #legend>
            <FluxStatisticsLegend>
                <FluxStatisticsLegendItem
                    color="primary"
                    label="Organic"
                    value="44%"/>
                <FluxStatisticsLegendItem
                    color="#10b981"
                    label="Direct"
                    value="28%"/>
                <FluxStatisticsLegendItem
                    color="#3b82f6"
                    label="Referral"
                    value="18%"/>
                <FluxStatisticsLegendItem
                    color="#f59e0b"
                    label="Social"
                    value="10%"/>
            </FluxStatisticsLegend>
        </template>
    </FluxStatisticsChartPane>
</template>

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