Radial chart

const data = [
  { name: "Progress", value: 72, fill: "var(--chart-1)" },
]

const chartConfig = {
  progress: { label: "Progress", color: "var(--chart-1)" },
}

<ChartContainer config={chartConfig} className="h-[250px]">
  <RadialBarChart
    data={data}
    startAngle={90}
    endAngle={-270}
    innerRadius="70%"
    outerRadius="100%"
    cx="50%"
    cy="50%"
  >
    <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
    <RadialBar
      dataKey="value"
      cornerRadius={8}
      background={{ fill: "var(--muted)" }}
    />
    <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-3xl font-bold">
      72%
    </text>
  </RadialBarChart>
</ChartContainer>

const data = [
  { name: "Revenue", value: 85, fill: "var(--chart-1)" },
  { name: "Users", value: 62, fill: "var(--chart-2)" },
  { name: "Events", value: 91, fill: "var(--chart-3)" },
]

<RadialBarChart
  data={data}
  startAngle={90}
  endAngle={-270}
  innerRadius="30%"
  outerRadius="100%"
  barSize={12}
>
  <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
  <RadialBar
    dataKey="value"
    cornerRadius={6}
    background={{ fill: "var(--muted)" }}
  />
  <ChartLegend content={<ChartLegendContent />} />
</RadialBarChart>

<RadialBarChart
  data={[{ value: 68, fill: "var(--chart-2)" }]}
  startAngle={180}
  endAngle={0}
  innerRadius="60%"
  outerRadius="100%"
  cx="50%"
  cy="70%"
>
  <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
  <RadialBar
    dataKey="value"
    cornerRadius={8}
    background={{ fill: "var(--muted)" }}
  />
  <text x="50%" y="65%" textAnchor="middle" className="fill-foreground text-2xl font-bold">
    68
  </text>
  <text x="50%" y="75%" textAnchor="middle" className="fill-muted-foreground text-xs">
    Air quality index
  </text>
</RadialBarChart>