Dithered pie charts for React

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieSimple() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieSeparatorNone() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      separator={false}
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieLabel() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      valueLabels
      labelLines
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieLabelCustom() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      valueLabels
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieLabelList() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      labelsInside
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieLegend() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      legend
      height={300}
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieDonut() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={60}
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieDonutActive() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={60}
      activeIndex={0}
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-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 ChartPieDonutText() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={60}
      centerLabel
    />
  )
}

npx dithercharts add pie-chart

import { PieChart } from "@/components/dithercharts/pie-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "january", desktop: 212, mobile: 94 },
  { month: "february", desktop: 287, mobile: 203 },
  { month: "march", desktop: 241, mobile: 128 },
  { month: "april", desktop: 96, mobile: 181 },
  { month: "may", desktop: 198, mobile: 137 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
  mobile: { label: "Mobile" },
  january: { label: "January" },
  february: { label: "February" },
  march: { label: "March" },
  april: { label: "April" },
  may: { label: "May" },
} satisfies ChartConfig

export function ChartPieStacked() {
  return (
    <PieChart
      data={chartData}
      config={chartConfig}
      nameKey="month"
      dataKey={["desktop","mobile"]}
      label="Visitors by month and device"
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add pie-chart

"use client"

import { useState } from "react"

import { PieChart } from "@/components/dithercharts/pie-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "january", desktop: 212 },
  { month: "february", desktop: 287 },
  { month: "march", desktop: 241 },
  { month: "april", desktop: 96 },
  { month: "may", desktop: 198 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
  january: { label: "January" },
  february: { label: "February" },
  march: { label: "March" },
  april: { label: "April" },
  may: { label: "May" },
} satisfies ChartConfig

export function ChartPieInteractive() {
  const [active, setActive] = useState(chartData[0].month)
  return (
    <>
      <select aria-label="Month" value={active} onChange={(e) => setActive(e.target.value)}>
        {chartData.map((row) => (
          <option key={row.month} value={row.month}>
            {chartConfig[row.month as keyof typeof chartConfig].label}
          </option>
        ))}
      </select>
      <PieChart
        data={chartData}
        config={chartConfig}
        nameKey="month"
        dataKey="desktop"
        label="Desktop visitors by month"
        innerRadius={60}
        centerLabel
        tooltip={{ hideLabel: true }}
        activeIndex={chartData.findIndex((row) => row.month === active)}
      />
    </>
  )
}