Radar Chart — Advanced

Custom renderers and headless architecture for radar charts.

Tell your AI agent what you want to customize.

ui.flitter.dev/llm/chart/radar-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`	`{ angularAxis: Widget, radialAxis: Widget, dataView: Widget }`	Plot area — positions angular axis, radial axis, and data view together
`title`	`undefined`	Chart title text rendering
`legend`	`{ name: string, index: number }`	Individual legend item rendering
`angularAxis`	`{ line: Widget, labels: Widget[] }`	Angular axis container — assembles spoke lines and category labels
`angularAxisLine`	`{ axisCount: number }`	Angular axis spoke lines radiating from center
`angularAxisLabel`	`{ index: number, label: string, angle: number, nx: number, ny: number }`	Individual category label on the angular axis
`radialAxis`	`{ line: Widget, labels: Widget[] }`	Radial axis container — assembles concentric polygons and scale labels
`radialAxisLine`	`{ levels: number, axisCount: number }`	Concentric polygon grid lines
`radialAxisLabel`	`{ value: number, index: number }`	Scale value label on the radial axis
`dataView`	`{ radars: Widget[] }`	Data view container — wraps all radar polygon widgets
`radar`	`{ legend: string, index: number, vertices: RadarVertex[] }`	Individual radar polygon — vertices include { nx, ny, angle, ratio, value, label, index }

Usage

Override any element by passing a custom object.

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

RadarChart({
  style: "toast",
  data: { /* ... */ },
  custom: {
    radar: (args, context) => {
      // args: { legend, index, vertices: RadarVertex[] }
      //   RadarVertex: { nx, ny, angle, ratio, value, label, index }
      // context: RadarChartController & { config }
      //   - context.data, context.scale
      //   - context.width, context.height, context.legends
      //   - context.toggleSeries(), ...
      // Return any Flitter Widget
    },
  },
});

← Radar Chart