How to load OrgView centered by default?

Diagram
#1

Hi,
I’m using DHTMLX OrgView and I noticed that when the chart loads, it always appears in the top-left corner. I would like the org chart to be centered automatically when the page loads, without the user having to drag or zoom manually.

Is there a built-in setting or recommended way to make the OrgView center itself on initialization?
Any example code or workaround would be appreciated.
a2e121bd22874fe358d1fb076eb4bc02ed6cb672_2_690x376

#2

Hello,

Unfortunately, there is no built-in option for that. However, it can be implemented manually, and there are two possible approaches:

1. Shift the entire diagram using margin.x

setTimeout(() => {
	const SHAPE_WIDTH = 300;
	editor.diagram.config.margin.x =
		((document.querySelector(".dhx_editor_area").clientWidth / 2) - (SHAPE_WIDTH / 2))
		/ editor.config.scale;

	editor.paint();
});

Example:
https://snippet.dhtmlx.com/6df9drkj

This works, but as the hierarchy grows and scrollbars appear, the initial centering may no longer match where users expect the content to be.

2. Shift each item individually using dx

setTimeout(() => {
	const SHAPE_WIDTH = 300;
	editor.diagram.data.forEach(item => {
		item.dx =
			((document.querySelector(".dhx_editor_area").clientWidth / 2) - (SHAPE_WIDTH / 2))
			/ editor.config.scale;
	});
	editor.paint();
});

Example:
https://snippet.dhtmlx.com/18cfkok0

Both snippets illustrate the basic idea. For a full solution, you would integrate the logic into events such as zooming.