Area 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="area-chart-card"/>;}

Variants

Use stacked areas to read combined volume, overlapping areas to compare series, or the percent variant to express every category as shares of 100%. shape controls whether the connecting segments are curved or straight.

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

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

Data

Provide flat data rows with a label and numeric fields for each series. series identifies those fields and their colors. The component derives totals, legend values, tiles and hover readouts. Supply ranges for a period dropdown; the default preview includes three illustrative periods.

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

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