Stacked Area Chart API
Complete API reference for the Stacked Area Chart. Uses the line-chart headless engine with stacked area-specific configuration.
Data Format
Stacked Area Chart reuses the LineChartData format. Each dataset represents a stacked area series with values that are accumulated on top of previous series.
type LineChartData = {
labels: string[];
datasets: { legend: string; values: number[] }[];
};AG Style Config
Area
| Property | Type | Default | Description |
|---|---|---|---|
| area.opacity | number | 0.7 | Fill opacity of stacked areas (0 to 1). |
| area.strokeWidth | number | 2 | Stroke width of the area border line. |
| area.spline | boolean | false | Whether to use spline (smooth curve) interpolation. |
Toast Style Config
Area
| Property | Type | Default | Description |
|---|---|---|---|
| area.opacity | number | 0.6 | Fill opacity of stacked areas (0 to 1). |
| area.strokeWidth | number | 2 | Stroke width of the area border line. |
| area.spline | boolean | false | Whether to use spline (smooth curve) interpolation. |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| line | { values: number[]; legend: string; index: number; isHovered: boolean } | The stacked area/line path element for a single series. |
| 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 | { lines: Widget[] } | Container for all stacked area widgets. |
| 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 at a data point. |
| 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; hoveredPoint: HoveredLinePoint | null } | Tooltip positioning area that manages tooltip display. |
Context: LineChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | LineChartData | property | Current chart data (filtered by hidden series). |
| legends | string[] | property | All legend names from the raw data. |
| width | number | property | Current chart width in pixels. |
| height | number | property | Current chart height in pixels. |
| plotWidth | number | property | Width of the plot area in pixels. |
| plotHeight | number | property | Height of the plot area in pixels. |
| scale | LineChartScale | null | property | Computed scale with min, max, and step. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series legend names. |
| hoveredPoint | { index: number; legend: string } | null | property | Currently hovered point 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. |
| hoverPoint(index, legend) | (index: number, legend: string) => void | method | Set hover state on a specific point. |
| unhoverPoint(index, legend) | (index: number, legend: string) => void | method | Clear hover if the specified point is currently hovered. |
| unhoverAllPoints() | () => void | method | Clear all point hover state. |
| isPointHovered(index, legend) | (index: number, legend: string) => boolean | method | Check if a specific point is hovered. |
| getPointValue(index, legend) | (index: number, legend: string) => number | null | method | Get the value of a data point. |
| getPointPosition(index, legend) | (index: number, legend: string) => { x: number; y: number } | null | method | Get the pixel position of a data point. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
| setPlotSize(width, height) | (width: number, height: number) => void | method | Update plot area dimensions. |
Custom Part Example
import { ToastStackedAreaChart } from "@/components/flitter/charts/toast-stacked-area-chart";
<ToastStackedAreaChart
data={data}
config={{
area: { opacity: 0.5, spline: true },
}}
/>