Setting How to dynamically calculate coordinates for Fishbone Diagram?

Diagram
#1

I’m working with the DHTMLX Fishbone Diagram and my data is dynamic. Each data includes a different number of main and sub-bones.

Currently, it seems that I have to provide explicit X and Y coordinates for every single part of the diagram to keep the fishbone structure.

Is there a way to avoid manual coordinate calculation? Specifically:

  1. Does DHTMLX have an Auto-layout engine for Fishbone that positions elements based on their parent?
  2. If not, is there a JavaScript helper function or logic to calculate the X/Y offsets dynamically based on the number of elements?
#2

Hello @Dani10,

Does DHTMLX have an Auto-layout engine for Fishbone that positions elements based on their parent?

Unfortunately there is no built-in aoutoplace option for fisbone type diagram, only for the default one.

If not, is there a JavaScript helper function or logic to calculate the X/Y offsets dynamically based on the number of elements?

Technically it may be done by custom code, so you will have to manually set x/y offsets for elements.

Here is an example of possible solution:
https://snippet.dhtmlx.com/l3np1ekg

Here are the main points of solution:

1.) sourceData is now the input dataset without manual x/y and line points; it keeps IDs and relations (mainId, parentId).

2.) layoutFishboneData(items, options) is the core: it clones input, calculates coordinates, and returns diagram-ready data.

3.) Main bones (rectangle) are positioned by index (mainStartX + index * mainGapX) and side (top/bottom) controls Y.

4.) Problem node (circle) gets a fixed anchor position (problemX, problemY).

5.)Primary/secondary/tertiary endline items are placed by relation:
primary by mainId
secondary by parentId of primary
tertiary by parentId of secondary

6.) Line items are auto-routed: fromSide, toSide, and points are generated from the connected shapes.

7.)Layout behavior is configurable via cfg values (gaps/offsets), so you can tune spacing for bigger datasets.

This example contains cfg - initial config, which is also have to be dynamic, based on your diagram sizes/element count.

Usage:

const data = layoutFishboneData(sourceData);
 editor.parse(data);

It still can be changed based on your project requirements/visuals, but displays possible approach.

Kind regards,