Dithered combo charts for React

import { ComboChart } from "@/components/dithercharts/combo-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", revenue: 186, conversion: 2.1 },
  { month: "Feb", revenue: 305, conversion: 3.4 },
  { month: "Mar", revenue: 237, conversion: 2.8 },
  { month: "Apr", revenue: 173, conversion: 2.2 },
  { month: "May", revenue: 209, conversion: 2.9 },
  { month: "Jun", revenue: 264, conversion: 3.6 },
  { month: "Jul", revenue: 298, conversion: 4.1 },
  { month: "Aug", revenue: 251, conversion: 3.5 },
  { month: "Sep", revenue: 222, conversion: 3 },
  { month: "Oct", revenue: 276, conversion: 3.8 },
  { month: "Nov", revenue: 318, conversion: 4.4 },
  { month: "Dec", revenue: 342, conversion: 4.6 },
]

const chartConfig = {
  revenue: { label: "Revenue" },
  conversion: { label: "Conversion %" },
} satisfies ChartConfig

export function ChartCombo() {
  return (
    <ComboChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      lineKeys={["conversion"]}
      label="Monthly revenue and conversion"
    />
  )
}

import { ComboChart } from "@/components/dithercharts/combo-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", online: 120, retail: 90, margin: 18 },
  { month: "Feb", online: 150, retail: 110, margin: 21 },
  { month: "Mar", online: 140, retail: 95, margin: 19 },
  { month: "Apr", online: 170, retail: 120, margin: 24 },
  { month: "May", online: 160, retail: 130, margin: 22 },
  { month: "Jun", online: 190, retail: 140, margin: 26 },
]

const chartConfig = {
  online: { label: "Online" },
  retail: { label: "Retail" },
  margin: { label: "Margin %" },
} satisfies ChartConfig

export function ChartComboGrouped() {
  return (
    <ComboChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      lineKeys={["margin"]}
      label="Sales by channel and margin"
      legend
    />
  )
}

import { ComboChart } from "@/components/dithercharts/combo-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", new: 80, returning: 120, orders: 410 },
  { month: "Feb", new: 95, returning: 130, orders: 460 },
  { month: "Mar", new: 110, returning: 125, orders: 480 },
  { month: "Apr", new: 120, returning: 150, orders: 540 },
  { month: "May", new: 105, returning: 160, orders: 560 },
  { month: "Jun", new: 130, returning: 170, orders: 620 },
]

const chartConfig = {
  new: { label: "New" },
  returning: { label: "Returning" },
  orders: { label: "Orders" },
} satisfies ChartConfig

export function ChartComboStacked() {
  return (
    <ComboChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      lineKeys={["orders"]}
      label="Customers and orders"
      stack="stacked"
      legend
    />
  )
}

import { ComboChart } from "@/components/dithercharts/combo-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", sales: 420, target: 460 },
  { month: "Feb", sales: 380, target: 460 },
  { month: "Mar", sales: 450, target: 490 },
  { month: "Apr", sales: 470, target: 490 },
  { month: "May", sales: 430, target: 500 },
  { month: "Jun", sales: 530, target: 500 },
]

const chartConfig = {
  sales: { label: "Sales" },
  target: { label: "Target", pattern: "stripes" },
} satisfies ChartConfig

export function ChartComboTarget() {
  return (
    <ComboChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      lineKeys={["target"]}
      label="Sales against target"
      dualAxis={false}
      curve="step"
    />
  )
}