ValueFormat: NumberFormat | DateFormat | CustomFormat

Defined in: src/core/types/chart/base.ts:51

Specifies how a value should be formatted for display.

{ type: 'number' } — numeric formatting with optional precision, units, percent display, etc.
See FormatNumberOptions for all available options.
{ type: 'date' } — date/time formatting.
{ type: 'custom' } — user-defined formatter function. Receives the raw value
and returns the display string. Use it when the built-in number/date formatters
are not enough (e.g. bytes → KB/MB/GB, currency with locale, etc.).

Examples

// Two decimal places, shown as percent
{ type: 'number', precision: 2, format: 'percent' }

// Compact thousands: 1 500 000 → "1.5M"
{ type: 'number', unit: 'auto', precision: 1 }

// Date value (Unix ms) formatted as "17 October 2025"
{ type: 'date', format: 'DD MMMM YYYY' }

// Bytes → human-readable size
{
  type: 'custom',
  formatter: ({value}) => {
    const bytes = Number(value);
    if (!Number.isFinite(bytes)) return String(value);
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.min(units.length - 1, Math.floor(Math.log(Math.abs(bytes) || 1) / Math.log(1024)));
    return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
  },
}

DataLabelRendererData

Overview

ExamplesExamples

Examples