Radar chart

The radar chart compares multiple variables across one or more series on a circular grid. It is well suited for showing the shape of a feature set, skill profile, or scorecard.

Team performance

TIP

This component is best used inside a Chart pane to provide a consistent header.

Props

series: FluxStatisticsChartRadarSeries[]
The data rings to render. Each entry holds one value per indicator.

indicators: FluxStatisticsChartRadarIndicator[]
The named axes of the radar chart. Order must match the order of values in each series.

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

Single series

A single series radar chart showing one profile.

Preview

Skill profile

Code

<template>
    <FluxStatisticsChartPane
        icon="user"
        title="Skill profile"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            :indicators="indicators"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'Skills', values: [88, 76, 64, 91, 70, 82] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Vue', max: 100 },
        { name: 'TypeScript', max: 100 },
        { name: 'CSS', max: 100 },
        { name: 'Tooling', max: 100 },
        { name: 'Testing', max: 100 },
        { name: 'Design', max: 100 }
    ];
</script>

Multiple series

Two profiles overlaid on the same radar chart for comparison.

Preview

Profile comparison

Alice

Bob

Code

<template>
    <FluxStatisticsChartPane
        icon="users"
        title="Profile comparison"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            :indicators="indicators"
            :series="series"/>

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

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

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'Alice', values: [90, 80, 70, 95, 85, 78] },
        { name: 'Bob', values: [60, 70, 80, 75, 65, 85] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Speed', max: 100 },
        { name: 'Accuracy', max: 100 },
        { name: 'Quality', max: 100 },
        { name: 'Volume', max: 100 },
        { name: 'Focus', max: 100 },
        { name: 'Collaboration', max: 100 }
    ];
</script>

With fill

A radar chart with a more pronounced filled area.

Preview

Feature coverage

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Feature coverage"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            :advanced-options="advancedOptions"
            :indicators="indicators"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

<script
    setup
    lang="ts">
    import type { EChartsOption } from 'echarts/core';
    import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
    import { FluxStatisticsChartPane, FluxStatisticsRadarChart } from '@flux-ui/statistics';

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'Coverage', values: [75, 90, 60, 80, 70, 85] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Auth', max: 100 },
        { name: 'API', max: 100 },
        { name: 'UI', max: 100 },
        { name: 'Storage', max: 100 },
        { name: 'Sync', max: 100 },
        { name: 'Search', max: 100 }
    ];

    const advancedOptions: EChartsOption = {
        series: [{
            type: 'radar',
            areaStyle: { opacity: 0.55 },
            lineStyle: { width: 3 }
        }]
    };
</script>

With icons

A radar chart whose rings carry icons that surface in the legend.

Preview

Engineering review

Frontend

Backend

Code

<template>
    <FluxStatisticsChartPane
        icon="users"
        title="Engineering review"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            :indicators="indicators"
            :series="series"/>

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

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

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'Frontend', icon: 'desktop', color: 'primary', values: [88, 76, 64, 91, 70, 82] },
        { name: 'Backend', icon: 'server', color: 'info', values: [72, 90, 78, 82, 85, 76] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Speed', max: 100 },
        { name: 'Stability', max: 100 },
        { name: 'Volume', max: 100 },
        { name: 'Quality', max: 100 },
        { name: 'Coverage', max: 100 },
        { name: 'Velocity', max: 100 }
    ];
</script>

Many axes

A radar chart with a wider scorecard spanning eight indicators.

Preview

Product scorecard

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Product scorecard"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            :indicators="indicators"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'Product', values: [84, 76, 92, 68, 80, 74, 88, 82] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Performance', max: 100 },
        { name: 'Stability', max: 100 },
        { name: 'Security', max: 100 },
        { name: 'Usability', max: 100 },
        { name: 'Accessibility', max: 100 },
        { name: 'Documentation', max: 100 },
        { name: 'Support', max: 100 },
        { name: 'Onboarding', max: 100 }
    ];
</script>

With tooltip

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

Preview

Team performance

Code

<template>
    <FluxStatisticsChartPane
        icon="chart-line"
        title="Team performance"
        :aspect-ratio="1.4">
        <FluxStatisticsRadarChart
            tooltip
            :indicators="indicators"
            :series="series"/>
    </FluxStatisticsChartPane>
</template>

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

    const series: FluxStatisticsChartRadarSeries[] = [
        { name: 'This quarter', values: [82, 65, 73, 91, 70, 88] },
        { name: 'Last quarter', values: [70, 60, 64, 80, 65, 75] }
    ];

    const indicators: FluxStatisticsChartRadarIndicator[] = [
        { name: 'Speed', max: 100 },
        { name: 'Quality', max: 100 },
        { name: 'Volume', max: 100 },
        { name: 'Accuracy', max: 100 },
        { name: 'Focus', max: 100 },
        { name: 'Collaboration', max: 100 }
    ];
</script>