Localizing Pivot

By default, all labels in Pivot are defined in English, but you can provide custom translations for:

labels on the buttons ("Table", "Chart", "Group By", etc.)
chart types ("Line", "Radar", "Bar", etc.)
operations ("min", "max", "sum", etc.)

The Pivot widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Pivot titles are stored in the following object:

export default {
    //general
    Done: "Done",
    Table: "Table",
    Tree: "Tree",
    Chart: "Chart",
    "Click to configure": "Click to configure",
    "Configure Pivot": "Configure Pivot",
    Total: "Total",
    //settings
    Fields: "Fields",
    Methods: "Methods",
    Columns: "Columns",
    "Add column": "Add column",
    Rows: "Rows",
    "Add row": "Add row",
    "Clean rows": "Clean rows",
    Filters: "Filters",
    "Add filter": "Add filter",
    "Group By": "Group By",
    "Chart type": "Chart type",
    "Logarithmic scale": "Logarithmic scale",
    "X axis title": "X axis title",
    "Y axis title": "Y axis title",
    "Scale color": "Scale color",
    "Circled lines": "Circled lines",
    Horizontal: "Horizontal",
    Stacked: "Stacked",
    Lines: "Lines",
    Line: "Line",
    Radar: "Radar",
    Bar: "Bar",
    Area: "Area",
    Spline: "Spline",
    "Spline Area": "Spline Area",
    Pie: "Pie",
    Donut: "Donut",
    Values: "Values",
    "Add value": "Add value",
    "Field not defined": "Field not defined",
    Highlight: "Highlight",
    "Min X": "Min X",
    "Max X": "Max X",
    "Min Y": "Min Y",
    "Max Y": "Max Y",
    Footer: "Footer",
    "Total Column": "Total Column",
    Off: "Off",
    On: "On",
    "Sum Only": "Sum Only",
    "3D": "3D",
    "Show values inside": "Show values inside",
    //operations
    count: "count",
    max: "max",
    min: "min",
    avg: "avg",
    wavg: "wavg",
    any: "any",
    sum: "sum",
    complex: "complex",
    "Incorrect formula in values": "Incorrect formula in values",
};

Specifying Custom Locale

To change the default locale, you need to take the following steps:

1. Set custom translations by creating the needed locale (below it is "ru") within the pivot.locales object:

// Russian translations
pivot.locales.ru = {
    Table: "Таблица",
    Tree: "Дерево",
};

2. Define the current locale for Pivot. For these purposes, set the locale property of Pivot in its constructor:

// use custom scrolls, optional
webix.CustomScroll.init();
 
webix.ui({
  view: "pivot",
  locale: {
    lang: "ru",
    webix: {
      // switch all webix widgets to the selected locale
      ru: "ru-RU"
    },
  },
  url:"https://docs.webix.com/pivot-backend/"
});

Related sample: Pivot: Custom Locale

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

1. First, set custom translations to the desired labels:

// Russian
pivot.locales.ru = {  
    Table: "Таблица",
    Tree: "Дерево",
};
 
// Italian
pivot.locales.it = {
    Table: "Tabella",
    Tree: "Albero",
}

2. Switch between languages using Pivot locale service and its setLang method:

{
  view: "segmented",
  options: ["en", "ru", "it"],
  width: 250,
  click: function() {
    const locale = $$("pivot1").getService("locale");
    locale.setLang(this.getValue());
  }
}

How to Synchronize Pivot and Webix Locale

The built-in labels of Webix components within the Pivot, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Pivot and Webix, define webix parameter in the locale setting of the Pivot constructor:

{
  view:"pivot",
  url:"https://docs.webix.com/pivot-backend/",
  locale: {
    lang: "en",
    webix: {
      // switch Webix the selected locale
      en: "en-US",
      it: "it-IT"
    }
  }
}