0

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

vegaelce
  • 115
  • 6
  • `How to center my chart in every case?` What do you have in mind? Would you like to have a horizontal scroll in the middle after the initial load? – Sebastian Wędzel Oct 04 '21 at 11:51
  • No, the idea is : the frame containing the chart has always a fixed width (ex. 920px). If the width of the chart is bigger than the frame width (like in my example https://jsfiddle.net/vegaelce/cw2aLroz), a scrollbar is used to view the chart, but if the chart is smaller (only 2 or 3 sub nodes like in https://jsfiddle.net/vegaelce/vr28ja67/), the chart has to be drawn in the middle of this frame (not on the left of it). – vegaelce Oct 04 '21 at 12:30
  • 1
    something like is done here (I added auto margin through the CSS): https://jsfiddle.net/BlackLabel/ybctdx8f/ – Sebastian Wędzel Oct 05 '21 at 07:08

0 Answers0