Stacked Bar Chart API
Complete API reference for the Stacked Bar Chart. Uses the bar-chart headless engine with stacked bar-specific configuration.
Data Format
Stacked Bar Chart reuses the BarChartData format. Each dataset represents a stacked series with values accumulated on top of previous series.
type BarChartData = {
labels: string[];
datasets: { legend: string; values: number[] }[];
};AG Style Config
Bar
| Property | Type | Default | Description |
|---|---|---|---|
| bar.gap | number | 0 | Gap between stacked bars (typically 0 for stacked layout). |
Toast Style Config
Bar
| Property | Type | Default | Description |
|---|---|---|---|
| bar.gap | number | 0 | Gap between stacked bars (typically 0 for stacked layout). |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| barGroup | { bars: { bar: Widget; value: number; datasetIndex: number }[]; index: number; label: string } | Container for a group of stacked bars at a single label position. |
| barBox | { bar: Widget; value: number; ratio: number; alignment: Alignment; index: number; label: string; legend: string; isHovered: boolean } | Wrapper around each individual stacked bar segment. |
| bar | { value: number; label: string; legend: string; index: number; isHovered: boolean } | The visual bar element itself. |
| xAxis | { line: Widget; labels: Widget[]; tick: Widget } | The complete x-axis assembly. |
| yAxis | { line: Widget; labels: Widget[]; tick: Widget } | The complete y-axis assembly. |
| xAxisLabel | { name: string; index: number } | Individual x-axis label. |
| yAxisLabel | { name: string; index: number } | Individual y-axis label. |
| xAxisTick | undefined | X-axis tick mark. |
| yAxisTick | undefined | Y-axis tick mark. |
| xAxisLine | undefined | X-axis line. |
| yAxisLine | undefined | Y-axis line. |
| axisCorner | undefined | Corner element where x and y axes meet. |
| dataView | { barGroups: Widget[] } | Container for all bar groups in the data area. |
| layout | { title: Widget; legends: Widget[]; plot: Widget } | Top-level layout composing title, legends, and the plot area. |
| plot | { xAxis: Widget; yAxis: Widget; dataView: Widget; grid: Widget; axisCorner: Widget; tooltipArea: Widget } | The plot area composing axes, data view, grid, and tooltip. |
| legend | { name: string; index: number; isVisible: boolean } | Individual legend item. |
| title | undefined | Chart title element. |
| dataLabel | { value: number; label: string; legend: string } | Data label displayed on or near a bar. |
| grid | { xLine: Widget; yLine: Widget } | Grid container for horizontal and vertical grid lines. |
| gridXLine | undefined | Individual vertical grid line. |
| gridYLine | undefined | Individual horizontal grid line. |
| tooltip | { label: string; items: { legend: string; color: string; value: number }[] } | Tooltip content widget. |
| tooltipArea | { tooltip: Widget | null; hoveredBar: { index: number; legend: string; value: number; label: string; x: number; y: number; width: number; height: number } | null } | Tooltip positioning area that manages tooltip display. |
Context: BarChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | BarChartData | property | Current chart data (filtered by hidden series). |
| legends | string[] | property | All legend names from the raw data. |
| direction | "vertical" | "horizontal" | property | Current bar direction. |
| width | number | property | Current chart width in pixels. |
| height | number | property | Current chart height in pixels. |
| scale | BarChartScale | null | property | Computed scale with min, max, and step. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series legend names. |
| hoveredBar | { index: number; legend: string } | null | property | Currently hovered bar info. |
| config | TConfig | property | The resolved chart configuration object. |
| isSeriesVisible(legend) | (legend: string) => boolean | method | Check if a series is currently visible. |
| toggleSeries(legend) | (legend: string) => void | method | Toggle visibility of a series. |
| showSeries(legend) | (legend: string) => void | method | Show a hidden series. |
| hideSeries(legend) | (legend: string) => void | method | Hide a visible series. |
| showAllSeries() | () => void | method | Show all hidden series. |
| hoverBar(index, legend, anchorKey) | (index: number, legend: string, anchorKey: GlobalKey) => void | method | Set hover state on a specific bar. |
| unhoverBar(index, legend) | (index: number, legend: string) => void | method | Clear hover if the specified bar is currently hovered. |
| unhoverAllBars() | () => void | method | Clear all bar hover state. |
| isBarHovered(index, legend) | (index: number, legend: string) => boolean | method | Check if a specific bar is hovered. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
Custom Part Example
import { ToastStackedBarChart } from "@/components/flitter/charts/toast-stacked-bar-chart";
<ToastStackedBarChart
data={data}
config={{
bar: { gap: 2 },
}}
/>