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,
            }}
        />
    );
};