Gauges

Gauges are series without data: the value is set directly in the options.

Radial gauge

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Cluster load' },
    series: [
      {
        type: 'radial-gauge',
        value: 67,
        scale: { min: 0, max: 100 },
        segments: [
          { to: 60, color: '#21a06c' },
          { to: 85, color: '#f4a236' },
          { to: 100, color: '#e5484d' },
        ],
        label: { formatter: (value) => `${value}%` },
      },
    ],
  };
}

data.ts

/** The gauge does not use data — the value is set in options. */
export function getData() {
  return [];
}

Linear gauge

A linear scale with a target mark (bullet):

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Plan completion' },
    series: [
      {
        type: 'linear-gauge',
        value: 1240,
        target: 1500,
        scale: { min: 0, max: 2000 },
      },
    ],
    height: 180,
  };
}

data.ts

/** The gauge does not use data — the value is set in options. */
export function getData() {
  return [];
}

Target on a linear gauge

target — the target mark, thickness — the bar height:

config.ts

import { getData } from './data';
import type { ChartOptions } from 'grafit-charts';

export function createOptions(): ChartOptions {
  return {
    data: getData(),
    title: { text: 'Sales vs target' },
    series: [
      {
        type: 'linear-gauge',
        value: 7.4,
        target: 9,
        scale: { min: 0, max: 12 },
        thickness: 22,
        label: { formatter: (value) => `${value.toFixed(1)} of 12M` },
      },
    ],
  };
}

data.ts

export function getData() {
  return [];
}

Preset

Charts.createGauge({
  container,
  type: 'radial-gauge', // | 'linear-gauge'
  value: 67,
  scale: { min: 0, max: 100 },
  title: 'Cluster load',
});

Option	Type	Description
value	number	current value
needle	Switchable	needle (radial)
target	number	target mark (linear)

Full option list

Option	Type	Default	Description
startAngle	Degrees	-110	radial-gauge arc
endAngle	Degrees	110	radial-gauge arc
fills	ColorValue[]	palette	colors (when segments is not set)
thickness	Pixels	linear 16; radial auto (min 10)	bar/arc thickness
scale.min	number	0	scale minimum
scale.max	number	100	scale maximum
label.enabled	boolean	true	value in the center/alongside
label.formatter	(value) => string	the value	value format
segments[]	{ to, color }[]	—	radial-gauge color zones

Options

Options common to all series (name, showInLegend, tooltip.renderer, …) are covered in Common series options.