Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how the Chart component reacts to local changes and visualize the currency data based on the selected locale.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesDefaults,
    ChartCategoryAxis,
    ChartCategoryAxisItem
} from '@progress/kendo-react-charts';

import { DropDownList } from '@progress/kendo-react-dropdowns';
import { IntlProvider } from '@progress/kendo-react-intl';
import { loadCldr } from './cldr.js';

loadCldr();

class ChartContainer extends React.Component {
    state = {
        salesData: [ 20, 40, 45, 30, 50 ],
        purchaseData: [ 12, 30, 30, 45, 10 ],
        categories: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ],
        locale: 'bg-BG'
    };

    render() {
        const { purchaseData, categories, salesData, locale } = this.state;

        return (
            <div>
                 <div className="example-config">
                    <label>
                        Current local
                    </label>
                    <DropDownList
                        style={{ marginLeft: 5 }}
                        value={locale}
                        onChange={this.onChange}
                        data={[ 'bg-BG', 'en-US' ]}
                    />
                 </div>
                <IntlProvider locale={locale}>
                    <Chart>
                        <ChartCategoryAxis>
                            <ChartCategoryAxisItem categories={categories} />
                        </ChartCategoryAxis>
                        <ChartSeriesDefaults type="bar" labels={{ visible: true, format: 'c' }} />
                        <ChartSeries>
                            <ChartSeriesItem data={salesData} />
                            <ChartSeriesItem data={purchaseData} />
                        </ChartSeries>
                    </Chart>
                </IntlProvider>
            </div >
        );
    }

    onChange = ( event ) => {
        this.setState({ locale: event.target.value });
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
import { load } from '@progress/kendo-react-intl';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import bgNumbers from 'cldr-numbers-full/main/bg/numbers.json';
import bgCurrencies from 'cldr-numbers-full/main/bg/currencies.json';
import bgCaGregorian from 'cldr-dates-full/main/bg/ca-gregorian.json';
import bgDataFields from 'cldr-dates-full/main/bg/dateFields.json';
import bgTimeZoneNames from 'cldr-dates-full/main/bg/timeZoneNames.json';

function loadCldr() {
    load(
        likelySubtags,
        currencyData,
        weekData,
        bgNumbers,
        bgCurrencies,
        bgCaGregorian,
        bgDataFields,
        bgTimeZoneNames
    );
}

export { loadCldr };

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Charts do not provide built-in translated messages.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Chart.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    ChartTitle,
    ChartLegend
} from '@progress/kendo-react-charts';

const categories = [ 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 ];
const series = [ {
    name: 'India',
    data: [ 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 ]
}, {
    name: 'Russian Federation',
    data: [ 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 ]
}, {
    name: 'Germany',
    data: [ 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 ]
}, {
    name: 'World',
    data: [ 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 ]
} ];

const ChartContainer = () => (
    <div style={{ direction: 'rtl' }}>
        <Chart>
            <ChartTitle text="Gross domestic product growth GDP annual" />
            <ChartLegend position="top" orientation="horizontal" />
            <ChartCategoryAxis>
                <ChartCategoryAxisItem categories={categories} startAngle={45} />
            </ChartCategoryAxis>
            <ChartSeries>
                {series.map((item, idx) => (
                    <ChartSeriesItem
                        key={idx}
                        type="column"
                        data={item.data}
                        name={item.name}
                    />))}
            </ChartSeries>
        </Chart>
    </div >
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

In this article