Gauge chart

Vanilla JS

import { GaugeChart } from '@arshad-shah/swift-chart';

const chart = new GaugeChart('#chart', {
  theme: 'midnight',
  min: 0,
  max: 100,
  segments: [
    { from: 0, to: 60, color: '#5b8cff' },
    { from: 60, to: 85, color: '#ffa45b' },
    { from: 85, to: 100, color: '#ff5b5b' },
  ],
});
chart.setData([72]);

React

import { Gauge } from '@arshad-shah/swift-chart/react';

<Gauge
  data={[72]}
  theme="midnight"
  min={0}
  max={100}
  segments={[
    { from: 0, to: 60, color: '#5b8cff' },
    { from: 60, to: 85, color: '#ffa45b' },
    { from: 85, to: 100, color: '#ff5b5b' },
  ]}
  height={300}
/>

Reference

• Class: GaugeChart
• React component: Gauge