Stacked Area Chart — Advanced

Custom renderers and headless architecture for stacked area charts.

Tell your AI agent what you want to customize.

ui.flitter.dev/llm/chart/stacked-area-chart.md

Paste this URL into Claude Code or Cursor to generate custom renderers instantly.

Customizable Elements

Every visual element can be replaced with a custom renderer function. Each function receives element-specific args and a context with the full chart state.

Element	Args	Description
`layout`	`{ title: Widget, legends: Widget[], plot: Widget }`	Overall chart layout — arranges title, legend, and plot area
`plot`	`{ xAxis: Widget, yAxis: Widget, dataView: Widget, grid: Widget, axisCorner: Widget }`	Plot area — positions axes, data view, and grid together
`title`	`undefined`	Chart title text rendering
`legend`	`{ name: string, index: number }`	Individual legend item rendering
`dataView`	`{ lines: Widget[] }`	Data view container — wraps all stacked area/line widgets
`line`	`{ values: number[], legend: string, index: number }`	Individual stacked area/line element for a dataset
`dataLabel`	`{ value: number, label: string, legend: string }`	Data label displayed on or near a data point
`xAxis`	`{ line: Widget, labels: Widget[], tick: Widget }`	X-axis container — assembles line, ticks, and labels
`yAxis`	`{ line: Widget, labels: Widget[], tick: Widget }`	Y-axis container — assembles line, ticks, and labels
`xAxisLabel / yAxisLabel`	`{ name: string, index: number }`	Individual axis label text
`xAxisTick / yAxisTick`	`undefined`	Axis tick mark
`xAxisLine / yAxisLine`	`undefined`	Axis baseline
`axisCorner`	`undefined`	Corner where x-axis and y-axis meet
`grid`	`{ xLine: Widget, yLine: Widget }`	Grid container — holds horizontal and vertical grid lines
`gridXLine / gridYLine`	`undefined`	Individual grid line

Usage

Override any element by passing a custom object.

import { StackedAreaChart } from "@flitterjs/chart";

StackedAreaChart({
  style: "toast",
  data: { /* ... */ },
  custom: {
    line: (args, context) => {
      // args: { values, legend, index }
      // context: StackedAreaChartController & { config }
      //   - context.data, context.scale
      //   - context.width, context.height, context.legends
      //   - context.toggleSeries(), ...
      // Return any Flitter Widget
    },
  },
  getScale: (data, options) => { /* core scale logic */ },
  getScaleOptions: (ctx) => ({
    roughStepCount: Math.floor(ctx.height / 40),
  }),
});

← Stacked Area Chart