Orders 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="orders-chart-card"/>;}

Your own numbers

Supply data with the current and previous value for each period. The card calculates totals, change and hover details from those values. Set title to choose the resting header label.

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

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

In a row

The two free comparison cards share the available row width and use a default height of 344px. Place them side by side for the dashboard arrangement shown in the chat starter.

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

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