Skip to main content

Localization

It is possible to localize the interface of the Diagram editor into a desired language. For this, you need to provide the corresponding locale settings via the dhx.i18n.setLocale() method. The method takes two parameters: the diagram container and an object that contains rules of localization for a particular country.

//an example of English locale
const locale = {
applyAll: "Apply all",
exportData: "Export Data",
importData: "Import Data",
resetChanges: "Reset Changes",
autoLayout: "Auto Layout",

shapeSections: "Shapes",
groupSections: "Groups",
swimlaneSections: "Swimlanes",

gridStep: "Grid step",
arrange: "Arrange",
position: "Position",
size: "Size",
color: "Color",
title: "Title",
text: "Text",
image: "Image",
fill: "Fill",
textProps: "Text",
stroke: "Stroke",

headerText: "Header text",
headerFill: "Header fill",
headerStyle: "Header style",
headerPosition: "Header position",
headerEnable: "Header",
subHeaderRowsEnable: "Subheader rows",
subHeaderColsEnable: "Subheader cols",

positionOptions: {
top: "top",
bottom: "bottom",
left: "left",
right: "right",
},
switchOptions: {
on: "on",
off: "off",
},

menuDeleteRow: "Delete row",
menuDeleteCol: "Delete column",
menuMoveColumnRight: "Move column right",
menuMoveColumnLeft: "Move column left",
menuMoveRowUp: "Move row up",
menuMoveRowDown: "Move row down",
menuAddRowUp: "Add row up",
menuAddRowDown: "Add row down",
menuAddColumnRight: "Add column right",
menuAddColumnLeft: "Add column left",

imageUpload: "Click to upload",
emptyState: "Select a shape or a connector"
};

dhx.i18n.setLocale("diagram", locale);

After that, you need to initialize the editor and check how the labels' names have changed.

const editor = new dhx.DiagramEditor("editor_container", {
type: "default" // "default" | "org" | "mindmap"
// other config options
});

Related sample: Diagram editor. Default mode. Localization

Related sample: Diagram editor. Org chart mode. Localization