Bar List 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="bar-list-card"/>;}

Tabbed lists

Define tabs as objects containing an ID, label and item list. Items can include a small icon, flag or site mark. Percentages use the active tab’s total, while each bar is scaled against that tab’s largest value.

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

export default function Example(){return <SourceChartPreview id="bar-list-card" example="tabs"/>;}

Single list and mono

Pass items and title for a standalone list without tabs. Choose metric="value" to display amounts directly instead of shares. mono uses one neutral color for the complete list.

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

export default function Example(){return <SourceChartPreview id="bar-list-card" example="single"/>;}