Skip to main content

Localization

Our localization dependency is a main entry point to provide human readable strings to our dxchart5-react app.

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