Localization in React Chart

The Chart provides a built-in Localization library, allowing you to customize the data displayed in the chart for different languages and cultural preferences. You can easily change static text on various elements to languages such as Arabic, German, French, and more by defining the locale property and providing a translation object.

Configuration steps:

1. Choose the desired locale for your application.

2. Install the @syncfusion/react-cldr-data package, which provides CLDR (Unicode Common Locale Data Repository) data for culture-specific formatting.

   npm

   npm i @syncfusion/react-cldr-data
   

   npm i @syncfusion/react-cldr-data

3. Import the L10n class, loadCldr function from the @syncfusion/react-base package.

4. Import the required localization files for your chosen language and the necessary CLDR data files:

   App.tsx

   import { L10n, loadCldr } from "@syncfusion/react-base";
   import Localization from '../locale.json';
   import enNumberData from "@syncfusion/react-cldr-data/main/en/numbers.json";
   import enTimeZoneData from "@syncfusion/react-cldr-data/main/en/timeZoneNames.json";
   

   import { L10n, loadCldr } from "@syncfusion/react-base"; import Localization from '../locale.json'; import enNumberData from "@syncfusion/react-cldr-data/main/en/numbers.json"; import enTimeZoneData from "@syncfusion/react-cldr-data/main/en/timeZoneNames.json";

5. Call the loadCldr function with the imported data to enable formatting and parsing for the selected culture:

   App.tsx

   loadCldr(enNumberData, enTimeZoneData);
   

   loadCldr(enNumberData, enTimeZoneData);

6. Use the L10n.load method to load your translation object.

7. Set the locale property of the Chart to apply the selected language.

Internationalization

The Chart Internationalization library enables localized display of numbers, dates, and times based on the selected language and region. You can customize the appearance of these values by setting format strings in the format property.

The following sample demonstrates usage for en-US (English), de (German - Germany), fr-CH (French - Switzerland), ar (Arabic), and zh (Chinese - China) based on locale selection. The data in chart updates its number, date, and time formatting according to the selected culture.