GaugeChart

Live preview

Loading example…

Gauge (semi or three-quarter arc). Colored range bands, a filled progress arc or a needle, min/max labels, optional ticks and an animated value. Bands are explorable with the keyboard and show a tooltip.

Import

import { GaugeChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/gauge-chart.

Usage

<GaugeChart
  title="Ocupación de sillas"
  label="Ocupación de sillas"
  value={76}
  min={0}
  max={100}
  variant="semi"
  mode="progress"
  ranges={occupancyBands}
  thickness={18}
  roundedCaps
  ticks={0}
  minMaxLabels
  valueFormat={percentFormat}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`description`	`string`
`value` *	`number`
`min`	`number`	`0`
`max`	`number`	`100`
`variant`	`"semi" \| "three-quarter"`	`"semi"`	`semi` is a half circle, `three-quarter` a 270 degree arc.
`mode`	`"progress" \| "needle"`	`"progress"`	Filled arc (`progress`) or a pointer over the bands (`needle`).
`ranges`	`readonly GaugeRange[]`		Colored bands. With `progress` they sit behind the arc and the arc takes the color of the band it is in.
`height`	`number \| "fill"`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`thickness`	`number`	`18`	Arc thickness in pixels.
`roundedCaps`	`boolean`	`true`
`ticks`	`number`	`0`	Value labels along the inside of the arc (count of divisions, 0 = none).
`tickMarks`	`boolean`	`false`	Draws a tick line at every division (and at each minor step), like a dial.
`minorTicks`	`number`	`4`	Minor tick lines between two divisions; only with `tickMarks`.
`centerContent`	`((context: GaugeCenterContext) => ReactNode)`		Replaces the value and caption in the middle with your own content (HTML, sized to the arc).
`minMaxLabels`	`boolean`	`true`	Min and max under the ends of the arc.
`label`	`string`		Caption under the value, e.g. “Ocupación de sillas”.
`valueFormat`	`ValueFormat`
`tooltip`	`boolean`	`true`
`loading`	`boolean`	`false`
`animate`	`boolean`	`true`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/gauge-chart/gauge-chart.tsx