Dithered radar charts for React

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarDefault() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarDots() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      dots="square"
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

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

export function ChartRadarMultiple() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186, mobile: 160 },
  { month: "February", desktop: 185, mobile: 170 },
  { month: "March", desktop: 207, mobile: 180 },
  { month: "April", desktop: 173, mobile: 160 },
  { month: "May", desktop: 160, mobile: 190 },
  { month: "June", desktop: 174, mobile: 204 },
]

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

export function ChartRadarLinesOnly() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      fill={false}
      grid={{ spokes: false }}
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridCustom() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={{ spokes: false, radii: [90] }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 285 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 203 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 264 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridFilled() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={{ filled: true }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridNone() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={false}
      dots="square"
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridCircle() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={{ shape: "circle" }}
      dots="square"
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 203 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridCircleNolines() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={{ shape: "circle", spokes: false }}
      dots="square"
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 285 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 203 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 264 },
]

const chartConfig = {
  desktop: { label: "Desktop" },
} satisfies ChartConfig

export function ChartRadarGridCircleFilled() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      grid={{ shape: "circle", filled: true }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

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

export function ChartRadarLabelCustom() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      valueLabels
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

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

export function ChartRadarRadius() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      spokeLabels={false}
      radiusAxis
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

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

export function ChartRadarLegend() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      legend
      tooltip={{ indicator: "line" }}
    />
  )
}

npx dithercharts add radar-chart

import { RadarChart } from "@/components/dithercharts/radar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"
import { ArrowLineDownIcon, ArrowLineUpIcon } from "@phosphor-icons/react"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", icon: <ArrowLineDownIcon /> },
  mobile: { label: "Mobile", icon: <ArrowLineUpIcon /> },
} satisfies ChartConfig

export function ChartRadarIcons() {
  return (
    <RadarChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      legend
      tooltip={{ indicator: "line" }}
    />
  )
}