Dithered charts for React

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212 },
  { month: "Feb", desktop: 287 },
  { month: "Mar", desktop: 241 },
  { month: "Apr", desktop: 96 },
  { month: "May", desktop: 198 },
  { month: "Jun", desktop: 226 },
]

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

export function AreaChartDefault() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212 },
  { month: "Feb", desktop: 287 },
  { month: "Mar", desktop: 241 },
  { month: "Apr", desktop: 96 },
  { month: "May", desktop: 198 },
  { month: "Jun", desktop: 226 },
]

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

export function AreaChartLinear() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      curve="linear"
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212 },
  { month: "Feb", desktop: 287 },
  { month: "Mar", desktop: 241 },
  { month: "Apr", desktop: 96 },
  { month: "May", desktop: 198 },
  { month: "Jun", desktop: 226 },
]

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

export function AreaChartStep() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      curve="step"
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartLegend() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="stacked"
      legend
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartStacked() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="stacked"
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartStackedExpanded() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="expanded"
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"
import { MonitorIcon, DeviceMobileIcon } from "@phosphor-icons/react"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartIcons() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="stacked"
      legend
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartGradient() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="stacked"
      fill="gradient"
    />
  )
}

npx dithercharts add area-chart

import { AreaChart } from "@/components/dithercharts/area-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", desktop: 212, mobile: 94 },
  { month: "Feb", desktop: 287, mobile: 203 },
  { month: "Mar", desktop: 241, mobile: 128 },
  { month: "Apr", desktop: 96, mobile: 181 },
  { month: "May", desktop: 198, mobile: 137 },
  { month: "Jun", desktop: 226, mobile: 149 },
]

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

export function AreaChartAxes() {
  return (
    <AreaChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
      stack="stacked"
      yAxis
    />
  )
}