GaugeConfig

Defined in: types/index.ts:463

Gauge / meter configuration.

Example

new GaugeChart('#chart', {
  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]);

Extends

• BaseChartConfig

Properties

animate?

optional animate?: boolean

Defined in: types/index.ts:321

Run an entry animation on the first render and on data updates. Default true.

Inherited from

BaseChartConfig.animate

---

animDuration?

optional animDuration?: number

Defined in: types/index.ts:323

Animation duration in milliseconds. Default 600.

Inherited from

BaseChartConfig.animDuration

---

animEasing?

optional animEasing?: EasingName

Defined in: types/index.ts:325

Easing curve. Default 'easeOutCubic'.

Inherited from

BaseChartConfig.animEasing

---

ariaDescription?

optional ariaDescription?: string

Defined in: types/index.ts:391

Longer accessible description. Rendered into a hidden element next to the canvas and linked via the standard aria-describedby attribute.

Inherited from

BaseChartConfig.ariaDescription

---

ariaLabel?

optional ariaLabel?: string

Defined in: types/index.ts:386

Accessible label for screen readers (rendered as canvas aria-label).

Inherited from

BaseChartConfig.ariaLabel

---

colorFn?

optional colorFn?: ColorFn

Defined in: types/index.ts:363

Per-datum colour callback, applied at draw time. Highest-precedence layer of the colour resolver chain — returning undefined falls through to Dataset.colors[i], then Dataset.color, then the theme palette.

Example

new BarChart('#chart', {
  colorFn: (v) => v < 0 ? '#ef4444' : v > 100 ? '#22c55e' : '#5b8cff',
});

Inherited from

BaseChartConfig.colorFn

---

formatValue?

optional formatValue?: (value) => string

Defined in: types/index.ts:350

Format a numeric value for axis ticks, tooltips, and labels.

Parameters

value

number

Returns

string

Example

formatValue: (v) => v >= 1000 ? `${(v/1000).toFixed(1)}k` : `${v}`

Inherited from

BaseChartConfig.formatValue

---

legendPosition?

optional legendPosition?: LegendPosition

Defined in: types/index.ts:337

Where the legend appears relative to the plot. Default 'top'.

Inherited from

BaseChartConfig.legendPosition

---

max?

optional max?: number

Defined in: types/index.ts:467

Maximum scale value. Default 100.

---

min?

optional min?: number

Defined in: types/index.ts:465

Minimum scale value. Default 0.

---

onClick?

optional onClick?: (index, data, event) => void

Defined in: types/index.ts:380

Click handler. Receives the clicked datum’s index, the resolved data shape, and a ChartClickEvent with the original row, the resolved series, the numeric value, and the underlying DOM event — everything you need to wire a chart into a drill-down / user-journey flow.

The third argument is additive; existing two-argument handlers keep working unchanged.

Parameters

index

number

data

ResolvedData

event

ChartClickEvent

Returns

void

Example

onClick: (_i, _d, e) => analytics.track('chart_click', {
  label: e.label, value: e.value, series: e.series?.label,
});

Inherited from

BaseChartConfig.onClick

---

padding?

optional padding?: Partial<Padding>

Defined in: types/index.ts:329

Override the auto-computed plot area padding (pixels).

Inherited from

BaseChartConfig.padding

---

responsive?

optional responsive?: boolean

Defined in: types/index.ts:327

Auto-resize when the container size changes via ResizeObserver. Default true.

Inherited from

BaseChartConfig.responsive

---

segments?

optional segments?: GaugeSegment[]

Defined in: types/index.ts:471

Coloured threshold ranges painted around the arc.

---

showGrid?

optional showGrid?: boolean

Defined in: types/index.ts:331

Show grid lines on the plot area. Default true.

Inherited from

BaseChartConfig.showGrid

---

showLegend?

optional showLegend?: boolean

Defined in: types/index.ts:335

Render a legend listing each series. Default true.

Inherited from

BaseChartConfig.showLegend

---

showTooltip?

optional showTooltip?: boolean

Defined in: types/index.ts:333

Render an interactive tooltip on hover. Default true.

Inherited from

BaseChartConfig.showTooltip

---

subtitle?

optional subtitle?: string

Defined in: types/index.ts:341

Sub-heading rendered under the title.

Inherited from

BaseChartConfig.subtitle

---

theme?

optional theme?: Theme | ThemeName

Defined in: types/index.ts:319

Theme name ('midnight' etc.) or a complete Theme object.

Inherited from

BaseChartConfig.theme

---

title?

optional title?: string

Defined in: types/index.ts:339

Chart heading rendered above the plot.

Inherited from

BaseChartConfig.title

---

tooltipContainer?

optional tooltipContainer?: HTMLElement

Defined in: types/index.ts:403

Where to mount the floating tooltip element. Defaults to:

1. The canvas’s shadow root, if the chart is inside one (so the tooltip stays inside the same Shadow DOM encapsulation).
2. Otherwise, the chart’s container element — keeping the tooltip inside the chart’s stacking context (e.g. inside a modal, popover, or web component).

Pass an explicit HTMLElement to portal the tooltip elsewhere (e.g. directly to document.body for a Radix-style portal).

Inherited from

BaseChartConfig.tooltipContainer

---

value?

optional value?: number

Defined in: types/index.ts:469

Current value (alternative to setData([value])).