GaugeChartComponent
Single-needle gauge chart used inside container settings for thresholded percentage values. Displays a value as a gauge/speedometer chart with label and unit.
Single-needle gauge chart used inside container settings for thresholded percentage values.
Displays a value as a gauge/speedometer chart with label and unit.
import { GaugeChartComponent } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
max | Required | number | — | Maximum value for the gauge |
value | Required | number | — | Current value |
label | Optional | string | undefined | — | Label/title for the chart |
unit | Required | string | — | Unit of measurement |
chartStyle | Optional | React.CSSProperties | undefined | — | Custom chart style |
colors | Optional | string[] | undefined | — | Arc colors in HEX format |
hideText | Optional | boolean | undefined | — | Hide the percentage text inside the chart |
height | Optional | number | undefined | — | Chart height in pixels |
className | Optional | string | undefined | — | Custom className |
Usage
Arc-gauge chart for displaying a single metric against its maximum range. Used in MicroBT container views for temperature and pressure readings.
Minimal example
import { GaugeChartComponent } from "@tetherto/mdk-react-devkit";
<GaugeChartComponent max={100} value={72} label="Temperature" unit="°C" />
Example
import { GaugeChartComponent } from '@tetherto/mdk-react-devkit'export const GaugeChartComponentExample = () => ( <div className="mdk-example-row"> <GaugeChartComponent max={100} value={72} label="Temperature" unit="°C" /> <GaugeChartComponent max={10} value={3.5} label="Pressure" unit="bar" /> </div>)