Stage Bars 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="stage-bars-card"/>;}

Mono

Enable mono to replace the individual stage colors with one neutral ink: mid-gray in light mode and a lighter tone in dark mode.

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

export default function Example(){return <SourceChartPreview id="stage-bars-card" mono/>;}

Data

Supply ordered stages with a label, value and optional color. Every added stage creates a bar and metric tile; the card expands as needed. Shares use the first stage and the label column accommodates the longest name. Add an icon inside each bar, or use showIcons={false} to hide them. Ranges carry their own values and optional headline or delta; onRangeChange lets your application load another period. The default preview contains three local datasets.

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

export default function Example(){return <SourceChartPreview id="stage-bars-card" stages={[{label:'Visited',value:100},{label:'Signed up',value:60},{label:'Activated',value:32}]}/>;}