Internationalization (i18n) in Highcharts Grid

Use the lang option to translate built-in Grid text and accessibility messages, and to control locale-aware date and number formatting.

Translating Grid text

Use lang to localize UI labels such as loading text, filter and sort controls, pagination text, and accessibility announcements. If the same translations should apply to multiple grids on the page, use Grid.setOptions() to define them globally.

Grid.setOptions({
    lang: {
        locale: 'nb-NO',
        loading: 'Laster...',
        noData: 'Ingen data å vise',
        filter: 'Filtrer',
        sortAscending: 'Sorter stigende',
        sortDescending: 'Sorter synkende',
        pagination: {
            pageInfo:
                'Viser {start} - {end} av {total} ' +
                '(side {currentPage} av {totalPages})',
            pageSizeLabel: 'rader per side'
        },
        accessibility: {
            sorting: {
                sortable: 'Sorterbar.',
                announcements: {
                    ascending: 'Sortert stigende.',
                    descending: 'Sortert synkende.',
                    none: 'Ikke sortert.'
                }
            }
        }
    }
});

You only need to override the strings you want to change. The remaining lang options fall back to the built-in defaults. For a full list of available options, see the API reference.

Column filtering labels

Column filtering uses lang.columnFilteringOperators for default operator labels on string, number, and boolean columns, and for shared labels such as empty and notEmpty on all column types.

Datetime columns use the same operator keys as number columns in configuration and API, but the filter UI can show date-specific text. Override selected operators with lang.columnFilteringDateTimeOperators:

Grid.setOptions({
    lang: {
        columnFilteringOperators: {
            greaterThan: 'Greater than',
            equals: 'Equals',
            contains: 'Contains',
            empty: 'Empty',
            notEmpty: 'Not empty'
        },
        columnFilteringDateTimeOperators: {
            equals: 'On',
            doesNotEqual: 'Not on',
            greaterThan: 'After',
            greaterThanOrEqualTo: 'On or after',
            lessThan: 'Before',
            lessThanOrEqualTo: 'On or before'
        }
    }
});

You only need to include the keys you want to change. Any operator not listed in columnFilteringDateTimeOperators falls back to columnFilteringOperators, then to a readable default derived from the operator name.

Operator key	Default datetime UI label
equals	On
doesNotEqual	Not on
greaterThan	After
greaterThanOrEqualTo	On or after
lessThan	Before
lessThanOrEqualTo	On or before

For how operators map to filtering configuration, see Column filtering, including the upgrading section if you are migrating from older option names.

The lang.columnFilteringConditions option is deprecated. Use lang.columnFilteringOperators instead.

Locale resolution

Locale-aware formatting follows this order:

1. lang.locale
2. The grid container or closest ancestor element with a lang attribute
3. The browser's default locale

This affects templated date and number formatting in Grid, including cells.format and grid.time.dateFormat().

Time formatting

Time formatting is handled by Intl.DateTimeFormat.prototype.format through the Grid time engine, and can be aware of the user's locale.

Grid uses lang.locale first, then the grid container or closest ancestor element with a lang attribute, and finally the browser's default locale.

To set the locale globally, use Grid.setOptions():

Grid.setOptions({
    lang: {
        locale: 'en-US'
    }
});

To format dates and times, use one of the supported formats.

columns: [{
    id: 'date',
    header: {
        format: 'Date of purchase'
    },
    cells: {
        format: '{value:%[dbY]}'
    }
}, ...]

For more advanced formatting, use the formatter callback function:

columns: [{
    id: 'date',
    cells: {
        formatter: function () {
            if (this.value === null) {
                return '';
            }
            return this.row.viewport.grid.time.dateFormat({
                weekday: 'short',
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            }, this.value);
        }
    }
}]

Number formatting

Number formatting in templates is handled by the template engine. The following example formats numbers with thousands separators:

columns: [{
    id: 'weight',
    className: 'custom-column-class-name',
    cells: {
        format: '{value:,.1f} kg'
    }
}, ...]

If you define lang.decimalPoint or lang.thousandsSep, those values override the locale-specific separators for templated numbers.

API reference

• lang