Categorical bars on ECharts: multi-series, stacked, horizontal, units, legend, and item clicks — theme-synced in light and dark.
GroupedStackedHorizontal
import { BarChart } from '@chanrg/4ui/echarts';<BarChart {categories} {series} unit="ms" stacked />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { BarChart } from '@chanrg/4ui';import { BarChart } from '@chanrg/4ui/echarts';<BarChart {categories} {series} unit="ms" stacked />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
categories | string[] | [] | Axis categories. |
series | { name, values, color? }[] | [] | One entry per series; null values render as gaps. |
stacked | boolean | false | Stack the series. |
horizontal | boolean | false | Flip the axes. |
onItemClick | (event) => void | — | Bar click with dataIndex/name. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Canvas rendering — pair with a DataTable for non-visual access to the numbers.