Radar Chart Card

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="radar-chart-card"/>;}

Variants

Choose a filled radar, dots, comparison lines or a centered score using variant. Score mode places values beside the axes and summarizes them in the raised center disc. Enable tiles to place a metric tile beneath each axis; the card then grows to fit the additional content.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="radar-chart-card" example="variants"/>;}

Data

Provide one labeled row per axis and numeric fields for each series. series identifies those fields and can supply their colors. The chart derives its scale ceiling, totals, legend and hover details. Each range may supply another dataset with a headline and delta. The dropdown reports onRangeChange so your application can load values. Three local snapshots are used when no input data is supplied.

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="radar-chart-card" data={[{name:'Design',value:80},{name:'Code',value:65},{name:'Research',value:90}]}/>;}