Gauges

Гейджи — серии без данных: значение задаётся прямо в 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

Линейная шкала с целевой отметкой (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 — отметка цели, thickness — высота полосы:

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 [];
}

Пресет

Charts.createGauge({
  container,
  type: 'radial-gauge', // | 'linear-gauge'
  value: 67,
  scale: { min: 0, max: 100 },
  title: 'Загрузка кластера',
});

Опция	Тип	Описание
value	number	текущее значение
needle	Switchable	стрелка (radial)
target	number	целевая отметка (linear)

Полный список опций

Опция	Тип	По умолчанию	Описание
startAngle	Degrees	-110	дуга radial-gauge
endAngle	Degrees	110	дуга radial-gauge
fills	ColorValue[]	палитра	цвета (если не заданы segments)
thickness	Pixels	linear 16; radial авто (мин. 10)	толщина полосы/дуги
scale.min	number	0	минимум шкалы
scale.max	number	100	максимум шкалы
label.enabled	boolean	true	значение в центре/рядом
label.formatter	(value) => string	значение	формат значения
segments[]	{ to, color }[]	—	цветовые зоны radial-gauge

Опции

Общие опции всех серий (name, showInLegend, tooltip.renderer, …) — в разделе Общие опции серий.