Pie chart

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

Sales by category

Electronics38

Clothing27

Books20

Other15

TIP

This component is best used inside a Chart pane.

Props

slices: FluxStatisticsChartPieSlice[]
The pie 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 pie chart inside a chart pane with matching colors and a legend.

Preview

Sales by category

Electronics38

Clothing27

Books20

Other15

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Sales by category"
        :aspect-ratio="1.5">
        <FluxStatisticsPieChart :slices="slices"/>

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

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Electronics', value: 38, color: 'primary' },
        { label: 'Clothing', value: 27, color: '#10b981' },
        { label: 'Books', value: 20, color: '#3b82f6' },
        { label: 'Other', value: 15, color: '#f59e0b' }
    ];
</script>

Few slices

A focused pie chart with three categorical slices.

Preview

Subscription split

Active68

Trialing22

Churned10

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Subscription split"
        :aspect-ratio="1.5">
        <FluxStatisticsPieChart :slices="slices"/>

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

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Active', value: 68, color: 'success' },
        { label: 'Trialing', value: 22, color: 'info' },
        { label: 'Churned', value: 10, color: 'danger' }
    ];
</script>

Minimal

A simple two-slice pie chart without a legend.

Preview

Storage breakdown

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Storage breakdown"
        :aspect-ratio="1.5">
        <FluxStatisticsPieChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Used', value: 64 },
        { label: 'Free', value: 36 }
    ];
</script>

With tooltip

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

Preview

Sales by category

Electronics38

Clothing27

Books20

Other15

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Sales by category"
        :aspect-ratio="1.5">
        <FluxStatisticsPieChart
            tooltip
            :slices="slices"/>

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

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Electronics', value: 38, color: 'primary', icon: 'laptop' },
        { label: 'Clothing', value: 27, color: '#10b981', icon: 'shirt' },
        { label: 'Books', value: 20, color: '#3b82f6', icon: 'book' },
        { label: 'Other', value: 15, color: '#f59e0b', icon: 'cubes' }
    ];
</script>