Heatmap Chart — Advanced

Custom renderers and headless architecture for heatmap charts.

Tell your AI agent what you want to customize.

ui.flitter.dev/llm/chart/heatmap-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, legend: Widget, plot: Widget }`	Overall chart layout — arranges title, color-scale legend, and plot area
`plot`	`{ xAxis: Widget, yAxis: Widget, dataView: Widget, axisCorner: Widget }`	Plot area — positions axes and data view together (no grid)
`title`	`undefined`	Chart title text rendering
`legend`	`undefined`	Color-scale legend bar
`dataView`	`{ segments: Widget[][] }`	Data view container — wraps all segment widgets as a 2D grid [yIndex][xIndex]
`segment`	`{ value: number, xIndex: number, yIndex: number }`	Individual heatmap cell element
`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

Usage

Override any element by passing a custom object.

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

HeatmapChart({
  style: "toast",
  data: { /* ... */ },
  custom: {
    segment: (args, context) => {
      // args: { value, xIndex, yIndex }
      // context: HeatmapChartController & { config }
      //   - context.data, context.scale
      //   - context.width, context.height
      //   - context.toggleSeries(), ...
      // Return any Flitter Widget
    },
  },
});

← Heatmap Chart