Localization

Translate shared chart controls without changing the data. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

The drawing toolbar in this example uses French labels such as Sélectionner, Ligne and Flèche. Hover or keyboard-focus the icons to read the translated labels. The plotted data labels stay independent of control translations.

Pass partial locale overrides at creation; unspecified strings keep their defaults. Locale functions and callbacks are runtime configuration.

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  "chartType": "line",
  "axes": {
    "x": {
      "scale": "time"
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  },
  "navigation": {
    "enabled": true
  },
  "annotations": {
    "editable": true
  },
  "localeText": {
    "annotations": {
      "editor": {
        "select": "Sélectionner",
        "rectangle": "Rectangle",
        "line": "Ligne",
        "arrow": "Flèche",
        "note": "Note",
        "save": "Enregistrer",
        "cancel": "Annuler"
      }
    }
  }
});

// When the host unmounts:
// chart.destroy();

API and configuration

const chart = await createChart({
  container, data: rows, mapping,
  annotations: { editable: true },
  localeText: { annotations: { editor: {
    select: 'Sélectionner', line: 'Ligne', arrow: 'Flèche',
    save: 'Enregistrer', cancel: 'Annuler',
  } } },
});

Support and behavior

localeText is creation-time configuration rather than a chart model patch. It covers navigation, annotation editing, runtime messages and other shared labels. It does not translate application-authored titles, category labels or values; provide those yourself. Use the public locale types for the complete supported key set.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts.

All chart tools · Chart types · Data & Configuration

Locale sections and formatting

createChartsLocaleText(localeText?, overrides?) resolves partial nested ChartsLocaleTextOptions against DEFAULT_CHARTS_LOCALE_TEXT. The second argument wins over the first; supplied values win over built-in defaults. Use the complete resolved object for pure data serializers that need ChartsLocaleText. Keep formatter functions synchronous and deterministic.

Public sections	Coverage
renderer, data, dataTable, histogramData	Numeric/date/observation text, hierarchy separators, source summaries, tabular and histogram data labels.
navigation, interaction, legendPositions	Navigation/range preset captions, inspection modes and legend placement names.
annotations, colors	Drawing/editor/status labels, color controls and nested picker labels.
chartOptions.labels, .descriptions, .selectValues	Option headings, help and select-value labels used by the shared inspector.
chartTypes, chartDescriptions, gallery	Native catalog names/descriptions and grouped gallery UI.
inspector, context, dialog, actions, controls, status	Shared surface controls, dialogs, management state and status messages.
query, drill, totals, drillSyncModes, themes, contextMenu, uiErrors	Shared contracts consumed by Pivot’s query/drill/management adapters. These strings do not add those adapters to standalone Charts.
links, dataSource, underlyingRecords	Chart linking, async load/retry and source-record inspection messages.

import { createChartsLocaleText } from '@revolist/charts/core';
const number = new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 1 });
const localeText = createChartsLocaleText({
  renderer: { formatNumber: value => number.format(value) },
  dataTable: { categoryHeader: 'Période' },
  dataSource: { loading: 'Chargement…', retry: 'Réessayer' },
});

The public ChartsLocaleTextOptions type provides the exact leaf keys and function signatures for each section; use it with satisfies when authoring translation modules. Locale formatting changes display text, not instants, source IDs or numeric values. Timezone-aware range arithmetic is independently configured by navigation.rangeSelector.timeZone; axis date display uses its own formatting policy. See named-timezone calendar ranges. Recreate the renderer/controller (or replace a wrapper’s creation options) to apply new locale configuration; functions are omitted from saved models.