Centering organizational highcharts with custom nodes width

681 views Asked by At

I use highcharts to draw dynamically organizational charts (horizontal or vertical) in the same frame (fixed width and height) but with different data (depending of previous action of the user to choose the organizational he wants to display). I need each level of organization to get the same height and I also need to be able to set the width of the nodes to always get the same global rendering. Scrollbars will be added to the Iframe to be able to view all the chart. I used the following code to achieve that :

events: {
      load() {
        let chart = this,
        series = chart.series[0],
        newHeight = (series.options.nodeWidth+series.options.nodePadding) * (series.nodeColumns.length+1);
    
        let tab_length = [];
        for(var i=0; i < series.nodeColumns.length; i++){
              tab_length.push(series.nodeColumns[i].length);
        }
        let max_col = Math.max(...tab_length), newWidth;
        
    if(series.options.width)
    newWidth = (series.options.width+series.options.nodePadding) * max_col+series.options.nodePadding;
        
      chart.update({
        chart: {
          width: newWidth,
          height: newHeight
        }
      })
      }

It works good. The result for a full organizational chart is here : https://jsfiddle.net/vegaelce/cw2aLroz The problem is when a chart get less nodes, my chart is correctly drawn but it is completly sticked to the left border of the frame, I need it to be centered in the frame. An example of small organizational chart in my Frame i here : https://jsfiddle.net/vegaelce/vr28ja67 or here : https://jsfiddle.net/vegaelce/s9q3yb70/

Note : if you comment the

width: 200,

You'll see the orginal width of Chart.

How to center my chart in every case ? Thanks

0

There are 0 answers