Charts

Gauge

Green, amber past 75%, red past 90%. The number is always written.

46/120

Gulshan · cars

82%

Banani occupancy

57/60

Dhanmondi · bikes

gauge-chart.tsx

"use client";

import { GaugeChart } from "@waveinno/ui";

export default function GaugeChartExample() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <GaugeChart value={46} max={120} label="Gulshan · cars" format={(v, m) => `${v}/${m}`} />
      <GaugeChart value={82} label="Banani occupancy" />
      <GaugeChart value={57} max={60} label="Dhanmondi · bikes" format={(v, m) => `${v}/${m}`} />
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { GaugeChart } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<GaugeChart>

src/components/charts/gauge-chart.tsx

Prop	Type	Default	Description
`value`required	`number`	—
`max`	`number`	`100`
`label`	`string`	—
`format`	`(value: number, max: number) => string`	(v, m) => `${Math.round((v / m) * 100)}%`
`thresholds`	`[number, number]`	`[0.75, 0.9]`	Fractions of max where the colour turns warning, then danger.
`invert`	`boolean`	`false`	For measures where low is bad (battery, stock): the colours flip.
`size`	`number`	`200`
`className`	`string`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui