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

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 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
            :options="{
                colors: ['var(--primary-600)', '#10b981', '#3b82f6', '#f59e0b'],
                grid: {padding: {top: 21, left: 15, right: 15, bottom: 15}},
                labels: ['Electronics', 'Clothing', 'Books', 'Other']
            }"
            :series="[38, 27, 20, 15]"/>

        <template #legend>
            <FluxStatisticsLegend>
                <FluxStatisticsLegendItem
                    color="primary"
                    label="Electronics"
                    value="38%"/>
                <FluxStatisticsLegendItem
                    color="#10b981"
                    label="Clothing"
                    value="27%"/>
                <FluxStatisticsLegendItem
                    color="#3b82f6"
                    label="Books"
                    value="20%"/>
                <FluxStatisticsLegendItem
                    color="#f59e0b"
                    label="Other"
                    value="15%"/>
            </FluxStatisticsLegend>
        </template>
    </FluxStatisticsChartPane>
</template>

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