Polar area chart

The polar area chart is a variation of the pie chart where each segment has the same angle but a different radius based on its value. It places more emphasis on magnitude than a regular pie or donut.

Revenue by segment

TIP

This component is best used inside a Chart pane.

Props

slices: FluxStatisticsChartPieSlice[]
The polar slices to render. Each slice sweeps the same angle but its radius scales with `value`.

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

Basic

A simple polar area chart with five segments.

Preview

Inventory

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Inventory"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Books', value: 30 },
        { label: 'Music', value: 24 },
        { label: 'Movies', value: 18 },
        { label: 'Games', value: 14 },
        { label: 'Other', value: 9 }
    ];
</script>

Custom colors

A polar area chart with explicit segment colors.

Preview

Operational status

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Operational status"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Healthy', value: 62, color: 'success' },
        { label: 'Degraded', value: 24, color: 'warning' },
        { label: 'Down', value: 10, color: 'danger' },
        { label: 'Unknown', value: 4, color: 'gray' }
    ];
</script>

Many segments

A polar area chart with a larger set of segments.

Preview

Country distribution

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Country distribution"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'NL', value: 42 },
        { label: 'DE', value: 28 },
        { label: 'BE', value: 22 },
        { label: 'FR', value: 18 },
        { label: 'UK', value: 14 },
        { label: 'ES', value: 11 },
        { label: 'IT', value: 9 },
        { label: 'PL', value: 7 },
        { label: 'SE', value: 5 },
        { label: 'DK', value: 3 }
    ];
</script>

With icons

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

Preview

Channel mix

Email38

Search52

Direct22

Social18

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Channel mix"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart :slices="slices"/>

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

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Email', value: 38, color: 'primary', icon: 'paper-plane' },
        { label: 'Search', value: 52, color: 'success', icon: 'magnifying-glass' },
        { label: 'Direct', value: 22, color: 'info', icon: 'globe' },
        { label: 'Social', value: 18, color: 'warning', icon: 'message' }
    ];
</script>

Few segments

A focused polar area chart with three segments.

Preview

Team allocation

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Team allocation"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Engineering', value: 52 },
        { label: 'Design', value: 28 },
        { label: 'Support', value: 18 }
    ];
</script>

With tooltip

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

Preview

Revenue by segment

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-pie"
        title="Revenue by segment"
        :aspect-ratio="1.4">
        <FluxStatisticsPolarAreaChart
            tooltip
            :slices="slices"/>
    </FluxStatisticsChartPane>
</template>

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

    const slices: FluxStatisticsChartPieSlice[] = [
        { label: 'Retail', value: 44 },
        { label: 'B2B', value: 55 },
        { label: 'Marketplace', value: 13 },
        { label: 'Subscriptions', value: 33 },
        { label: 'Services', value: 22 }
    ];
</script>