Skip to content

Draw Chart

anime.js

One timeline: the line draws, points drop in and the headline number counts up.

Answer accuracy, 14 weeks
83%
0306090

Install

$ npx shadcn@latest add https://spotcheckui.com/r/draw-chart.json

Also installs animejs.

Usage

import { DrawChart } from "@/components/spotcheck/draw-chart"

<DrawChart
  title="Answer accuracy, 14 weeks"
  label="Accuracy rose from 38% to 83% over 14 weeks"
  series={accuracy}
  max={90}
  ticks={[0, 30, 60, 90]}
  format={(value) => `${Math.round(value)}%`}
/>

It plays the first time it scrolls into view. Change its key to play it again.

Props

  • series * Requirednumber[]Default —
  • label * RequiredstringDefault —Summarises the trend for screen readers, such as "Accuracy rose from 38% to 83%".
  • titlestringDefault —The heading above the number.
  • maxnumberDefault Math.max(...series)The top of the scale. Defaults to the highest value.
  • ticksnumber[]Default []Values for the horizontal guide lines.
  • format(value: number) => stringDefault Built inFormats the headline number. Pass it from a client component.
  • durationnumberDefault 1300How long the line takes to draw, in milliseconds.
  • classNamestringDefault —

Keyboard

Nothing to operate: this component displays information.

Reduced motion

The finished chart appears at once.