Beautiful Charts
Get the charts

Instrument · Free · Recharts or ECharts

Radial chart: pick what's on it

Every option is a prop of the installed chart. The preview and the code use the same props, so what you copy is what you see.

Options, preview and code

Engine
Presets
Shape
Surroundings
Legend
Tooltip
Colours
Behaviour
Feel
States

Quarter goals

Against each team's target

2 of 3 rings have met their goals. Product is furthest behind at 55 of 80.

3 rings. 2 of 3 rings have met their goals. Product is furthest behind at 55 of 80.
TeamValueMaximumShare of maximumGoal
Code for this chart

"use client";

// Install: npx shadcn@latest add https://beautifulcharts.dev/r/instrument-radial-chart-recharts.json
import { RadialChart } from "@/components/beautiful-charts/themes/instrument/recharts/radial-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { team: "Support", done: 92, target: 90 },
  { team: "Sales", done: 140, target: 100 },
  { team: "Product", done: 55, target: 80 },
];

const config = {  } satisfies ChartConfig;

export function MyChart() {
  return (
    <RadialChart
      data={data}
      config={config}
      nameKey="team"
      valueKey="done"
      goalKey="target"
      max={150}
      eyebrow="Quarter goals"
      title="Against each team's target"
    />
  );
}