Dithered radial charts for React

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "chrome", visitors: 268 },
  { browser: "safari", visitors: 214 },
  { browser: "firefox", visitors: 179 },
  { browser: "edge", visitors: 152 },
  { browser: "other", visitors: 86 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig

export function ChartRadialSimple() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={30}
      track
    />
  )
}

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "chrome", visitors: 268 },
  { browser: "safari", visitors: 214 },
  { browser: "firefox", visitors: 179 },
  { browser: "edge", visitors: 152 },
  { browser: "other", visitors: 86 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig

export function ChartRadialLabel() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={30}
      track
      labelsInside
    />
  )
}

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "chrome", visitors: 268 },
  { browser: "safari", visitors: 214 },
  { browser: "firefox", visitors: 179 },
  { browser: "edge", visitors: 152 },
  { browser: "other", visitors: 86 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig

export function ChartRadialGrid() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={30}
      grid
    />
  )
}

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "safari", visitors: 200 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  safari: { label: "Safari" },
} satisfies ChartConfig

export function ChartRadialText() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Safari visitors"
      centerLabel
      tooltip={{ hideLabel: true }}
      innerRadius={100}
      endAngle={250}
      track
    />
  )
}

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "safari", visitors: 1260 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  safari: { label: "Safari" },
} satisfies ChartConfig

export function ChartRadialShape() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Safari visitors"
      centerLabel
      tooltip={{ hideLabel: true }}
      innerRadius={80}
      endAngle={100}
      track
    />
  )
}

npx dithercharts add radial-chart

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "january", mobile: 570, desktop: 1260 },
]

const chartConfig = {
  mobile: { label: "Mobile" },
  desktop: { label: "Desktop" },
  january: { label: "January" },
} satisfies ChartConfig

export function ChartRadialStacked() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="month"
      dataKey={["mobile","desktop"]}
      label="January visitors by device"
      innerRadius={80}
      startAngle={-90}
      endAngle={90}
      centerLabel
      tooltip={{ hideLabel: true }}
    />
  )
}