Dithered line charts for React

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartDefault() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartLinear() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      curve="linear"
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartStep() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      curve="step"
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartMultiple() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Visitors by month and device"
      height={220}
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartDots() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      dots="square"
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartCustomDots() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      dots="ring"
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "Chrome", visitors: 268, dot: "square" },
  { browser: "Safari", visitors: 214, dot: "ring" },
  { browser: "Firefox", visitors: 179, dot: "square" },
  { browser: "Edge", visitors: 152, dot: "ring" },
  { browser: "Other", visitors: 86, dot: "square" },
]

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

export function LineChartDotsColors() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="browser"
      label="Visitors by browser"
      height={220}
      patternKey="dot"
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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 LineChartLabel() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      label="Desktop visitors by month"
      height={220}
      dots="square"
      valueLabels
    />
  )
}

npx dithercharts add line-chart

import { LineChart } from "@/components/dithercharts/line-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" },
} satisfies ChartConfig

export function LineChartCustomLabel() {
  return (
    <LineChart
      data={chartData}
      config={chartConfig}
      xKey="browser"
      label="Visitors by browser"
      height={220}
      dots="square"
      labelsAtPoints
    />
  )
}