Combo 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="combo-chart-card"/>;}

Data

The bar and line series use the same rows. Each names its numeric field, label, optional color and formatter. Their independent axes keep different units readable together, such as a count and percentage or currency and ROAS. Supply ranges to populate the period dropdown, or use the illustrative defaults.

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

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