Skip to main content

Localization

The localization dependency is a main entry point to provide human-readable strings to the DXcharts React app.

Localization Configuration​

The Localization interface structure:

Custom localization​

We highly recommend using TypeScript, because IDE will help with suggestions and it will be a lot easier to escape missing locale strings.

To provide your own localization object you should do the following:

import React from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { DEFAULT_LOCALIZATION, Localization } from '@dx-private/dxchart5-react/dist/config/localization/localization';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
const userLocalization: Localization = {
    ...DEFAULT_LOCALIZATION,
    sidebar: {
        ...DEFAULT_LOCALIZATION.sidebar,
        header: 'Drawings',
        buttons: {
            magnetMode: 'Magnet Mode',
            drawingMode: 'Drawing Mode',
            syncDrawings: 'Synchronize drawings',
            hideDrawings: 'Hide all drawings',
            showDrawings: 'Unhide all drawings',
            deleteDrawings: 'Delete all drawings',
        },
    },
    //...overrides,
};
export const UserApp = () => {
    return (
        <ChartReactApp
            dependencies={{
                ...CREATE_MOCK_PROVIDERS(),
                //...rest_dependencies,
                localization: userLocalization,
            }}
        />
    );
};

Default localization strings​

Import DEFAULT_LOCALIZATION from @dx-private/dxchart5-react/dist/config/localization/localization and spread it as the base object. Override only the sections you need to translate — this gives you the full default English string tree without copying it by hand.

import { DEFAULT_LOCALIZATION } from '@dx-private/dxchart5-react/dist/config/localization/localization';

const userLocalization = {
  ...DEFAULT_LOCALIZATION,
  drawings: {
    ...DEFAULT_LOCALIZATION.drawings,
    header: 'Desenhos',
  },
};

Pass the result via dependencies.localization on ChartReactApp, or the localization option on createWidget.

Renaming built-in indicators​

Built-in study display names come from localization.studies (import studiesDictionary from @dx-private/dxchart5-react/dist/config/localization/studies as the default). Override the title (and optionally shortTitle) for the study keys you want to rename, then pass that dictionary in two places:

  1. dependencies.localization — so the studies menu, properties dialog, and legend use your labels.
  2. DEFAULT_STUDIES_LIST(yourStudiesDictionary) when creating dxStudiesProvider — so the built-in study list registered at startup uses the same names.
import { studiesDictionary } from '@dx-private/dxchart5-react/dist/config/localization/studies';
import { DEFAULT_STUDIES_LIST } from '@dx-private/dxchart5-react/dist/config/studies-list';
import { fromRawStudiesSettings } from '@dx-private/dxchart5-react/dist/chart/model/studies.model';
import { createDxStudiesProvider } from '@dx-private/dxchart5-react/dist/providers/studies/dx-studies-provider';
import { DEFAULT_LOCALIZATION } from '@dx-private/dxchart5-react/dist/config/localization/localization';

const myStudiesDictionary = {
  ...studiesDictionary,
  macd: {
    ...studiesDictionary.macd,
    title: 'My MACD',
  },
};

const dxStudiesProvider = createDxStudiesProvider(
  DEFAULT_STUDIES_LIST(myStudiesDictionary).map(fromRawStudiesSettings),
);

const localization = {
  ...DEFAULT_LOCALIZATION,
  studies: myStudiesDictionary,
};

For JavaScript custom studies, set metainfo.title when calling addCustomStudy() — no localization dictionary entry is required.

Reading and updating localization at runtime​

After the chart API is ready, use getLocalization() and updateLocalization() on the chart React API (via onAPICreated):

const onAPICreated = (api) => {
  // Returns the current merged Localization object (defaults + your overrides)
  const current = api.getLocalization();

  // Apply partial updates at runtime
  api.updateLocalization({
    toolbar: { undo: 'Desfazer' },
  });
};

Further reading​