DitherCharts

Radar chart

Updated

RadarChart draws one polygon per series over a dashed web, with a spoke for each row. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Radar Chart

Desktop visitors around six months

Radar Chart

install command

npx dithercharts add radar-chart

usage

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarDefault() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
    />
  )
}

Installing needs DitherCharts Pro. See pricing.

Desktop visitors by month
monthDesktop
January186
February305
March237
April273
May209
June214
import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarDefault() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add radar-chart

Props

RadarChart props
PropTypeDefaultDescription
datarequiredType readonly ChartRow[]Default –One row per spoke, clockwise from 12 o'clock, e.g. { month: "January", desktop: 186, mobile: 80 }.
configrequiredType ChartConfigDefault –One entry per data key to plot, in draw order: its label and, optionally, its pattern ("stripes" hatches and dashes it).
xKeyrequiredType stringDefault –The row key that holds each spoke's label, e.g. "month".
labelrequiredType stringDefault –Accessible name, e.g. "Visitors by month". Also captions the table twin.
fillType booleanDefault trueEach series' polygon filled: half tone for a solid series, else its pattern. false draws outlines only.
valueLabelsType booleanDefault falseEach spoke's values, one per series joined by "/", over its label.
spokeLabelsType booleanDefault trueThe labels outside each spoke.
radiusAxisType booleanDefault falseEach ring's value, on the line halfway between the first two spokes, cleared out of the web.
legendType booleanDefault falseOne toggle per series under the chart, its pattern or config icon beside its label.
dotsType "square" | "ring"Default noneA dot on every point: a solid square, or a hollow ring that knocks the outline out.
gridType false | RadarGridDefault –The dashed web behind the series, or false for none: polygon or circle rings (default 5, evenly out to the edge, or at radii), spokes unless spokes is false, and filled toning every other band between rings from the edge in.
grid.shapeType "polygon" | "circle"Default "polygon"The rings' shape.
grid.spokesType booleanDefault trueA dashed line from the center out to each spoke's point.
grid.filledType booleanDefault falseEvery other band between rings toned, from the edge in.
grid.radiiType readonly number[]Default –Each ring's radius in CSS pixels, in place of 5 rings evenly out to the edge.
tooltipType TooltipOptionsDefault –The tooltip's indicator and label, and the spoke it opens on at rest.
styleType StyleIdDefault "bayer4"Dither style.
animationType "develop" | "none"Default "develop"Entrance animation; reduced motion always shows the final frame.
heightType numberDefault 250Height in CSS pixels; the width fills the container.
cellType numberDefault 3Dither cell size in CSS pixels; outlines are one cell wide.
classNameType stringDefault –Classes on the chart's outer figure.

Styles

The dither styles style takes:

  • "bayer2"
  • "bayer4"
  • "bayer8"
  • "blue-noise"
  • "halftone"
  • "crosshatch"
  • "pixel"
  • "stipple"
  • "engraved"
  • "mezzotint"
  • "woodcut"
  • "floyd-steinberg"
  • "atkinson"
  • "riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first spoke, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
KeyAction
Left arrow Right arrowPrevious / next spoke, anticlockwise / clockwise
Home EndFirst / last spoke
Up arrow Down arrowPrevious / next series (2+ series)
EscapeDismiss the cursor

Screen readers

  • The chart's label names it, says how many spokes it has and lists these keys.
  • Each key press is announced in a polite live region. Moving the pointer is silent.
  • The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
  • With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every radar chart example