GaugeChart

Shows one value between 0 and 1 against coloured bands.

SourcePackage @kerf-js/veneer

Preview

tsx

import { GaugeChart } from '@kerf-js/veneer'export function Budget() {  return (  <GaugeChart    title="Error budget used"    description="30 days, storefront"    data={0.64}    label="Used"  />  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { GaugeChart } from '@kerf-js/veneer'<GaugeChart  title="Error budget used"  description="30 days, storefront"  data={0.64}  label="Used"/>

Side by side

The colour changes as the value crosses each band.

tsx

import { GaugeChart, Grid } from '@kerf-js/veneer'export function Uptime() {  return (  <Grid    min="md"    cols={2}    gap="group"  >    <GaugeChart      title="Error budget used"      data={0.42}    />    <GaugeChart      title="Build minutes used"      data={0.87}    />  </Grid>  )}const min = 60_000

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`number`	—	The series to draw.
`summary`	`string \| ((c: { data: number; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`bands`	`Band[]`	—	Colour ranges as `[from, to, color]`.
`format`	`Fmt`	—	Turns a value into the text shown.
`label`	`string`	—	The word under the number.

RelatedRadial chart Sparkline