Line chart

Updated October 3, 2026

LineChart draws each series as a one-cell pixel line, dashed for a striped series, with optional square or ring dots. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Line Chart

Desktop visitors, January to June

Desktop visitors by month
month	Desktop
Jan	212
Feb	287
Mar	241
Apr	96
May	198
Jun	226

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}
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add line-chart

Props

LineChart props
Prop	Type	Default	Description
datarequired	Type readonly ChartRow[]	Default –	One row per x position, left to right, e.g. `{ month: "Jan", desktop: 186, mobile: 80 }`.
configrequired	Type ChartConfig	Default –	One entry per data key to plot, in draw order: its label and, optionally, its pattern ("stripes" dashes the line).
xKeyrequired	Type string	Default –	The row key that holds the x label, e.g. "month".
labelrequired	Type string	Default –	Accessible name, e.g. "Monthly revenue". Also captions the table twin.
legend	Type boolean	Default `false`	A legend under the chart whose buttons show and hide series.
curve	Type "monotone" \| "linear" \| "step"	Default `"monotone"`	How the line runs between points.
yAxis	Type boolean	Default `false`	Value labels beside the grid lines.
dots	Type "square" \| "ring"	Default none	A dot on every point: a solid square, or a hollow ring that knocks the line out.
patternKey	Type string	Default –	The row key that holds each point's own dot shape ("square" or "ring"), over `dots`.
valueLabels	Type boolean	Default `false`	Each point's value by it: above, or below a valley.
labelsAtPoints	Type boolean	Default `false`	The x labels by the first series' points instead of on the axis.
tooltip	Type TooltipOptions	Default –	The tooltip's indicator and label, and the x position it opens on at rest.
style	Type StyleId	Default `"bayer4"`	Dither style.
animation	Type "develop" \| "none"	Default `"develop"`	Entrance animation; reduced motion always shows the final frame.
height	Type number	Default `300`	Height in CSS pixels; the width fills the container.
cell	Type number	Default `3`	Dither cell size in CSS pixels; the line is one cell wide.
className	Type string	Default –	Classes on the chart's outer `figure`.

Styles

The dither styles style takes:

"bayer2"
"bayer4"
"bayer8"
"blue-noise"
"halftone"
"crosshatch"
"pixel"
"stipple"
"engraved"
"mezzotint"
"woodcut"
"floyd-steinberg"
"atkinson"
"riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first point, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
Key	Action
`←Left arrow` `→Right arrow`	Previous / next point
`Home` `End`	First / last point
`↑Up arrow` `↓Down arrow`	Previous / next series (2+ series)
`EscEscape`	Dismiss the cursor

Screen readers

The chart's label names it, says how many points it has and lists these keys.
Each key press is announced in a polite live region. Moving the pointer is silent.
The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every line chart example