Revenue 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="revenue-chart-card"/>;}

Your own numbers

Provide current and previous values in data. Totals, the percentage change and hover details all follow those numbers, avoiding a separate headline calculation. Set title for the resting header text.

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

export default function Example(){return <SourceChartPreview id="revenue-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 default card is 344px tall and grows to fill its share of a row. Pair it with Orders or another card to create the dashboard composition 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="revenue-chart-card" example="in-row"/>;}