Radar Chart API
Complete API reference for the Radar Chart, including data format, configuration options, custom parts, and context methods.
Data Format
Each dataset represents a radar polygon with a legend name and values for each axis label.
type RadarChartData = {
labels: string[];
datasets: { legend: string; values: number[] }[];
};AG Style Config
Radar
| Property | Type | Default | Description |
|---|---|---|---|
| radar.fillOpacity | number | 0.3 | Fill opacity of radar polygons (0 to 1). |
| radar.strokeWidth | number | 2 | Stroke width of radar polygon outlines. |
| radar.gridColor | string | "#e2e2e2" | Color of the radial grid lines. |
| radar.gridWidth | number | 1 | Width of radial grid lines. |
| radar.axisColor | string | "#8a8c8c" | Color of the angular axis lines. |
| radar.axisWidth | number | 1 | Width of angular axis lines. |
| radar.labelMargin | number | 20 | Margin around the radar plot area for axis labels. |
Toast Style Config
Radar
| Property | Type | Default | Description |
|---|---|---|---|
| radar.fillOpacity | number | 0.3 | Fill opacity of radar polygons (0 to 1). |
| radar.strokeWidth | number | 2 | Stroke width of radar polygon outlines. |
| radar.gridColor | string | "rgba(0, 0, 0, 0.1)" | Color of the radial grid lines. |
| radar.gridWidth | number | 1 | Width of radial grid lines. |
| radar.axisColor | string | "rgba(0, 0, 0, 0.1)" | Color of the angular axis lines. |
| radar.axisWidth | number | 1 | Width of angular axis lines. |
| radar.labelMargin | number | 5 | Margin around the radar plot area for axis labels. |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| layout | { title: Widget; legends: Widget[]; plot: Widget } | Top-level layout composing title, legends, and the plot area. |
| plot | { dataView: Widget; tooltipArea: Widget; web: Widget; radialAxis: Widget; angularItems: AngularItem[] } | The plot area with data view, web guides, radial axis, and angular labels. |
| radialAxis | { labels: RadialLabelItem[] } | Radial axis with value labels at each ring level. |
| web | { angularLines: WebAngularGuide[]; radialLines: WebRadialGuide[] } | The web/grid structure with angular and radial guide lines. |
| angularLine | { axisCount: number } | Individual angular guide line from center to edge. |
| radialLine | undefined | Individual radial (ring) guide line. |
| angularAxisLabel | { index: number; label: string; angle: number } | Label at the end of an angular axis. |
| radialAxisLabel | { value: number; index: number; ratio: number } | Value label on a radial ring. |
| dataView | { radars: Widget[] } | Container for all radar polygon widgets. |
| radar | { legend: string; index: number; vertices: RadarVertex[]; isHovered: boolean; hoveredPointIndex: number | null } | Individual radar polygon for a series. |
| legend | { name: string; index: number; isVisible: boolean } | Individual legend item. |
| title | undefined | Chart title element. |
| tooltip | { label: string; items: { legend: string; color: string; value: number }[] } | Tooltip content widget. |
| tooltipArea | { hoveredRadar: HoveredRadar | null; hoveredPoint: HoveredRadarPoint | null } | Tooltip positioning area. |
Context: RadarChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | RadarChartData | 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 | RadarChartScale | null | property | Computed scale with min, max, and step. |
| hiddenSeries | ReadonlySet<string> | property | Set of currently hidden series. |
| hoveredRadar | { index: number; legend: string } | null | property | Currently hovered radar polygon. |
| hoveredPoint | { index: number; legend: string; pointIndex: number } | null | property | Currently hovered vertex point. |
| 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. |
| showSeries(legend) | (legend: string) => void | method | Show a hidden series. |
| hideSeries(legend) | (legend: string) => void | method | Hide a visible series. |
| showAllSeries() | () => void | method | Show all hidden series. |
| hoverRadar(index, legend) | (index: number, legend: string) => void | method | Set hover state on a radar polygon. |
| unhoverRadar(index, legend) | (index: number, legend: string) => void | method | Clear hover on a radar polygon. |
| unhoverAllRadars() | () => void | method | Clear all radar hover state. |
| isRadarHovered(index, legend) | (index: number, legend: string) => boolean | method | Check if a specific radar is hovered. |
| hoverPoint(index, legend, pointIndex) | (index: number, legend: string, pointIndex: number) => void | method | Set hover state on a vertex point. |
| unhoverPoint(index, legend, pointIndex) | (index: number, legend: string, pointIndex: number) => void | method | Clear hover on a vertex point. |
| unhoverAllPoints() | () => void | method | Clear all point hover state. |
| isPointHovered(index, legend, pointIndex) | (index: number, legend: string, pointIndex: number) => boolean | method | Check if a specific vertex point is hovered. |
| getRadarVertices(index, legend) | (index: number, legend: string) => RadarVertex[] | null | method | Get computed vertices for a radar polygon. |
| getRadarAnchorPosition(index, legend) | (index: number, legend: string) => { x: number; y: number } | null | method | Get anchor position for a radar polygon. |
| 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 { ToastRadarChart } from "@/components/flitter/charts/toast-radar-chart";
<ToastRadarChart
data={data}
config={{
radar: { fillOpacity: 0.2, strokeWidth: 3 },
}}
/>