Radial Chart

1"use client"23import type { ChartConfig } from "@barefootjs/chart"45const chartConfig: ChartConfig = {6  safari: { label: "Safari", color: "hsl(221 83% 53%)" },7  chrome: { label: "Chrome", color: "hsl(142 76% 36%)" },8  // ...9}1011const chartData = [12  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },13  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },14  // ...15]1617export function RadialChartBasicDemo() {18  return (19    <ChartContainer config={chartConfig} className="w-full">20      <RadialChart data={chartData} innerRadius={50} outerRadius={110}>21        <RadialBar dataKey="visitors" />22      </RadialChart>23    </ChartContainer>24  )25}

1"use client"23import {4  ChartContainer,5  RadialChart,6  RadialBar,7  RadialChartLabel,8} from "@/components/ui/chart"910export function RadialChartLabelDemo() {11  const total = chartData.reduce((sum, d) => sum + d.visitors, 0)1213  return (14    <ChartContainer config={chartConfig} className="w-full">15      <RadialChart data={chartData} innerRadius={60} outerRadius={110}>16        <RadialBar dataKey="visitors" />17        <RadialChartLabel>18          <tspan className="text-3xl font-bold">{total}</tspan>19          <tspan className="text-xs">Visitors</tspan>20        </RadialChartLabel>21      </RadialChart>22    </ChartContainer>23  )24}

1"use client"23export function RadialChartHalfDemo() {4  return (5    <ChartContainer config={chartConfig} className="w-full">6      <RadialChart7        data={chartData}8        startAngle={180}9        endAngle={0}10        innerRadius={50}11        outerRadius={110}12      >13        <RadialBar dataKey="visitors" />14      </RadialChart>15    </ChartContainer>16  )17}

1"use client"23import { createSignal } from "@barefootjs/dom"45export function RadialChartInteractiveDemo() {6  const [showAll, setShowAll] = createSignal(true)78  return (9    <div>10      <div className="flex gap-2 mb-4">11        <button onClick={() => setShowAll(true)}>12          All Browsers13        </button>14        <button onClick={() => setShowAll(false)}>15          Top 316        </button>17      </div>18      <ChartContainer config={chartConfig} className="w-full">19        <RadialChart20          data={showAll() ? fullData : topThree}21          innerRadius={50}22          outerRadius={110}23        >24          <RadialBar dataKey="visitors" />25        </RadialChart>26      </ChartContainer>27    </div>28  )29}