Radial 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="radial-chart-card"/>;}

Variants

The rings, labels and grid variants draw one ring for each item. Gauge and solid treatments show a value against max, with a centered percentage. Stacked uses a half gauge to show the primary segment’s share, updating that readout when another segment is inspected.

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

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

With tiles

Use tiles for a color swatch, name and value beneath each metric. Tiles occupy three columns, with an incomplete last row stretched across the available width. Inspecting a tile emphasizes its ring, and inspecting the ring emphasizes its tile.

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

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

Data

Pass a labeled value per item, with an optional color. Items become rings or segments and use the chart palette unless you supply a color. max defines a full ring. Ranges may include new data, delta and headline values; onRangeChange can request application data. Without custom data, the card demonstrates three local snapshots.

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

export default function Example(){return <SourceChartPreview id="radial-chart-card" data={[{name:'Jan',value:120,previous:100},{name:'Feb',value:180,previous:150},{name:'Mar',value:160,previous:140}]}/>;}