Bar Chart — Advanced

Custom renderers and headless architecture for bar charts.

Tell your AI agent what you want to customize.

ui.flitter.dev/llm/chart/bar-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, series: Widget, grid: Widget, axisCorner: Widget }`	Plot area — positions axes, series, and grid together
`title`	`{ name: string }`	Chart title text rendering
`legend`	`{ name: string, index: number }`	Individual legend item rendering
`series`	`{ barGroups: Widget[] }`	Series container — wraps all bar groups
`barGroup`	`{ bars: { bar: Widget, value: number, datasetIndex: number }[], index: number, label: string }`	Bar group layout — arranges individual bars within a category (default: side-by-side Flex, stacked: stacked layout)
`barBox`	`{ bar: Widget, value: number, ratio: number, alignment: Alignment, index: number }`	Individual bar sizing — wraps a bar with FractionallySizedBox (toast uses AnimatedFractionallySizedBox)
`bar`	`{ value: number, label: string, legend: string, index: number }`	Individual bar element
`dataLabel`	`{ value: number, label: string, legend: string }`	Data label displayed on or near a bar
`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 { BarChart } from "@flitterjs/chart";

BarChart({
  style: "toast",
  data: { /* ... */ },
  custom: {
    bar: (args, context) => {
      // args: { value, label, legend, index }
      // context: BarChartController & { config }
      //   - context.data, context.scale, context.direction
      //   - context.width, context.height, context.legends
      //   - context.toggleSeries(), context.hoverBar(), ...
      // Return any Flitter Widget
    },
  },
  getScale: (data, options) => { /* core scale logic */ },
  getScaleOptions: (ctx) => ({
    roughStepCount: Math.floor(ctx.height / 40),
  }),
});

← Bar Chart