GaugeChart
GaugeChart - Presentational gauge / speedometer chart. Implementation note: this component used to wrap the `react-gauge-chart` NPM package, but that package…
GaugeChart - Presentational gauge / speedometer chart.
Implementation note: this component used to wrap the react-gauge-chart NPM package, but that package is published only as CommonJS with a broken module field that points at the same CJS file. That made it crash under ESM bundlers that don't add a __esModule ? .default : module interop shim (Webpack 4, raw esbuild, certain SSR setups, etc.) with React's "Element type is invalid" error. We replaced it with a pure-SVG internal implementation (see ./gauge-svg.tsx) so the component is bundler- and runtime-agnostic and has zero third-party runtime dependencies.
import { GaugeChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
percent | Required | number | — | Value between 0 and 1 (e.g. 0.75 = 75%). Values outside the range are clamped. |
colors | Optional | string[] | undefined | — | Arc colours in HEX format. |
arcWidth | Optional | number | undefined | — | Arc thickness as a fraction of the gauge radius (0–1). |
nrOfLevels | Optional | number | undefined | — | Number of arc segments. |
hideText | Optional | boolean | undefined | — | Hide the percentage text rendered inside the gauge. |
id | Optional | string | undefined | — | Stable id used for the gauge's accessibility labels. |
height | Optional | string | number | undefined | — | Chart height in pixels or any CSS length (e.g. `'200px'` or `'50%'`). |
maxWidth | Optional | number | undefined | — | Maximum width in pixels. |
className | Optional | string | undefined | — | — |
Usage
A gauge / speedometer chart rendered via react-gauge-chart. Accepts a percent value between 0 and 1 and displays it as a colored arc.
Notes
percentis automatically clamped to[0, 1].- When rendering multiple gauges on the same page, provide a unique
idfor each instance to preventreact-gauge-chartrendering conflicts.
Example
/** * Runnable example for GaugeChart. */import { GaugeChart } from '@tetherto/mdk-react-devkit'export const GaugeChartExample = () => ( <div className="mdk-example-row"> <GaugeChart percent={0.72} id="gauge-hash-rate" /> <GaugeChart percent={0.45} id="gauge-efficiency" colors={['#34C759', '#FF9500', '#FF3B30']} nrOfLevels={5} /> <GaugeChart percent={0.95} id="gauge-uptime" hideText height={160} /> </div>)