Radar Chart

x-h-chart-radar draws a radar chart from a single reactive configuration object. Each category gets its own axis arranged around a center, and every series is drawn as a closed shape across those axes. Multiple series are overlaid. Charts inherit the active theme colors and adapt to light and dark mode automatically.

Usage

Give the chart a container with an explicit height (charts fill their parent). Provide one or more series, each a list of numeric data points, and a matching labels array naming the axes. Use a radar chart to compare several quantitative dimensions at once, for example skill profiles or feature scores. To show a trend across an ordered sequence use a Line Chart, and to compare discrete categories use a Bar Chart.

API Reference

Component attribute(s)

x-h-chart-radar

Attributes

Attribute	Type	Required	Description
data-font-size	xs sm base lg	false	Changes the size of all chart text, such as labels, axis ticks, and the legend. Defaults to xs.

Configuration

Key	Type	Default	Description
series	{ name?, color?, data: number[] }[]	[]	One entry per shape. Multiple series are overlaid. For color values, see Colors.
labels	string[]	[]	Label for each axis around the chart.
legend	boolean	true	Show the color/label key.
axes	boolean	true	Show the numeric tick labels along the vertical.
gridlines	boolean	true	Show the spokes and the polygonal web rings.
tooltip	boolean	true	Show a tooltip on hover and emit interaction events.
dataLabels	boolean	false	Draw each point's value next to it.
tickCount	number	5	Target number of web rings.
valueFormat	(value) => string	locale number	Formats values in tooltips and tick labels.
palette	string[]	color-1 to color-9	Chart colors cycled for series without an explicit color. See Colors for more information.
seriesLabel	string	Series {index}	Template naming a series that has no name. {index} is substituted.
tableLabels	{ category? }	English defaults	Column headers of the hidden data table read by screen readers.

Colors

A series color (and the palette entries) is one of the chart colors color-1 to color-12. They paint with the theme's --chart-color-1 to --chart-color-12 variables (see Theme Customization). By default, they map to blue, red, green, orange, purple, teal, pink, indigo, yellow, gray, white and black. The standard color names (red, orange, yellow, green, teal, blue, indigo, purple, pink, gray, white and black) are deprecated. They still work but they will be removed in the next major version.

Accessibility

The chart is exposed to assistive technologies as a figure with a visually-hidden data table of its values, so screen-reader users get the underlying numbers (the visual shapes, web, and legend are marked decorative). It defaults to the accessible name "Radar chart". Set an aria-label attribute on the element to give it a more meaningful name.

Events

When tooltip is enabled, hovering and clicking points emit bubbling CustomEvents on the chart element - chart-hover, chart-leave, and chart-click. See the events reference for the shared detail shape.

Data Slots

Slot	Element
chart	x-h-chart-radar
chart-svg	The chart drawing
chart-spoke	A spoke of the grid
chart-ring	A grid ring
chart-tick	A scale label
chart-area	The filled area of a series
chart-segment	The outline of a series
chart-point	A data point
chart-label	A value label
chart-legend	The legend
chart-legend-swatch	A legend color swatch
chart-tooltip	The hover tooltip
chart-table	The data table for assistive technologies
chart-empty	The message shown when there is no data

Examples

Basic

<div
  class="aspect-square h-full"
  style="max-height: 20rem"
  x-h-chart-radar="{
    labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
    series: [{ name: 'Model A', data: [70, 90, 60, 85, 75] }]
  }"
></div>

Multiple series

<div
  class="aspect-square h-full"
  style="max-height: 20rem"
  x-h-chart-radar="{
    labels: ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
    series: [
      { name: 'Model A', data: [70, 90, 60, 85, 75] },
      { name: 'Model B', data: [85, 65, 80, 70, 90] }
    ]
  }"
></div>