DitherCharts

Bar chart

Updated

BarChart draws dithered bars per series, side by side or stacked, upright or horizontal, with a one-cell cap on each bar's value end. 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

Bar Chart

Desktop visitors, January to June

Bar Chart

install command

npx dithercharts add bar-chart

usage

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

Installing needs DitherCharts Pro. See pricing.

Desktop visitors by month
monthDesktop
Jan212
Feb287
Mar241
Apr96
May198
Jun226
import { BarChart } from "@/components/dithercharts/bar-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 BarChartDefault() {
  return (
    <BarChart
      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 bar-chart

Props

BarChart props
PropTypeDefaultDescription
datarequiredType readonly ChartRow[]Default –One row per x position, left to right, e.g. { month: "Jan", desktop: 186, mobile: 80 }.
configrequiredType ChartConfigDefault –One entry per data key to plot, in draw order: its label and, optionally, its pattern.
xKeyrequiredType stringDefault –The row key that holds the x label, e.g. "month".
labelrequiredType stringDefault –Accessible name, e.g. "Monthly revenue". Also captions the table twin.
legendType booleanDefault falseA legend under the chart whose buttons show and hide series.
yAxisType booleanDefault falseValue labels beside the grid lines.
horizontalType booleanDefault falseBars run left to right from the labels, one row per x position.
valueLabelsType booleanDefault falseEach bar's value past its end.
labelsInsideType booleanDefault falseThe x labels inside the first series' bars, cut out of the ink, instead of on the axis.
patternKeyType stringDefault –The row key that holds each bar's own pattern ("solid" or "stripes"), over its series' pattern.
activeIndexType numberDefault –The x position whose bars are highlighted at rest: solid ink inside a dashed ring.
stackType "none" | "stacked" | "expanded"Default "none"Series side by side, stacked, or stacked scaled to fill the height.
radiusType numberDefault 0 (square, pixel-hard ends)Corner radius of a bar's ends in CSS pixels, stepped by the dither grid.
tooltipType TooltipOptionsDefault –The tooltip's indicator and label, and the x position it opens on at rest.
styleType StyleIdDefault "bayer4"Dither style.
animationType "develop" | "none"Default "develop"Entrance animation; reduced motion always shows the final frame.
heightType numberDefault 300Height in CSS pixels; the width fills the container.
cellType numberDefault 3Dither cell size in CSS pixels.
classNameType stringDefault –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 bar, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
KeyUprightHorizontal
Left arrow Right arrowPrevious / next barPrevious / next series
Home EndFirst / last barFirst / last bar
Up arrow Down arrowPrevious / next series (2+ series)Previous / next bar (2+ series)
EscapeDismiss the cursorDismiss the cursor

Screen readers

  • The chart's label names it, says how many bars 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 bar chart example