Dithered tooltip charts for React

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipDefault() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipIndicatorLine() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ indicator: "line", defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipIndicatorNone() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ hideIndicator: true, defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipLabelCustom() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ label: "Activities", indicator: "line", defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300, day: "July 15, 2024" },
  { date: "Jul 16", running: 380, swimming: 420, day: "July 16, 2024" },
  { date: "Jul 17", running: 520, swimming: 120, day: "July 17, 2024" },
  { date: "Jul 18", running: 140, swimming: 550, day: "July 18, 2024" },
  { date: "Jul 19", running: 600, swimming: 350, day: "July 19, 2024" },
  { date: "Jul 20", running: 480, swimming: 400, day: "July 20, 2024" },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipLabelFormatter() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ labelKey: "day", defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipLabelNone() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ hideLabel: true, hideIndicator: true, defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipFormatter() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ hideLabel: true, hideIndicator: true, unit: "kcal", defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"
import { FootprintsIcon, WavesIcon } from "@phosphor-icons/react"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running", icon: <FootprintsIcon /> },
  swimming: { label: "Swimming", icon: <WavesIcon /> },
} satisfies ChartConfig

export function ChartTooltipIcons() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ hideLabel: true, defaultIndex: 1 }}
    />
  )
}

npx dithercharts add bar-chart

import { BarChart } from "@/components/dithercharts/bar-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "Jul 15", running: 450, swimming: 300 },
  { date: "Jul 16", running: 380, swimming: 420 },
  { date: "Jul 17", running: 520, swimming: 120 },
  { date: "Jul 18", running: 140, swimming: 550 },
  { date: "Jul 19", running: 600, swimming: 350 },
  { date: "Jul 20", running: 480, swimming: 400 },
]

const chartConfig = {
  running: { label: "Running" },
  swimming: { label: "Swimming" },
} satisfies ChartConfig

export function ChartTooltipAdvanced() {
  return (
    <BarChart
      data={chartData}
      config={chartConfig}
      xKey="date"
      label="Running and swimming by day"
      height={220}
      stack="stacked"
      tooltip={{ hideLabel: true, unit: "kcal", total: true, defaultIndex: 1 }}
    />
  )
}