Dither Chart

An area chart filled with ordered dither.

dither-chart-demo.tsx

import { DitherChart } from "@/components/dither-chart";

export function Visitors() {
  return (
    <DitherChart
      label="Visitors, last 7 days"
      data={[
        { label: "Mon", value: 1200 },
        { label: "Tue", value: 1850 },
        { label: "Wed", value: 1640 },
        { label: "Thu", value: 2310 },
        { label: "Fri", value: 2780 },
        { label: "Sat", value: 1960 },
        { label: "Sun", value: 2140 },
      ]}
      height={120}
    />
  );
}

Installation

pnpm dlx shadcn@latest add @gradients-pro/dither-chart

Needs a Pro account and the Pro registry setup.

Usage

import { DitherChart } from "@/components/dither-chart";

<DitherChart label="Visitors" data={data} />;

data takes two or more { label, value } points.

Props

Prop	Type	Default	Description
`data`	`DitherChartData`	required	Two or more `{ label, value }` points, in order. The type is a tuple of at least two points, and fewer than two throw an error that says so.
`label`	`string`	required	Accessible name, such as "Page views, last 30 days".
`height`	`number`	`160`	Plot height in CSS pixels.
`formatValue`	`(value: number) => string`	`toLocaleString`	Formats values in the tooltip and the screen-reader text.
`palette`	`"ultramarine" \| "ember" \| "mono" \| string[]`	`"ultramarine"`	A curated ramp, or your own 2 to 6 CSS colours from faint to hot (`var(--x)` included). Curated ramps switch between a light and a dark version with your theme.
`cell`	`number`	`2`	Size of one dither cell in CSS pixels.
`scheme`	`"light" \| "dark"`	follows the page	Forces a colour scheme. By default it reads a `dark` or `light` class (or `data-theme`) on `<html>`, then the system setting.
`className`, other `div` props			Passed to the wrapper.