Highcharts nodes are not rendered wide enough

Question

I have a highcharts-angular organizational chart where when there are a lot of nodes in the chart, the boxes get smaller and their text is hidden. How can I make the chart expand (and a horizontal scrollbar to show) as much as needed so everything will be fully visible?

you can see an example here.

my chart options are these

chartOptions: Highcharts.Options = {
    chart: { inverted: true },
    title: {  text: null },
    tooltip: {
      useHTML: true,
      padding: 10,
      style: { fontStyle: 'normal' },
      outside: true,
      distance: 30
    },
    series: [
      {
        type: 'organization',
        name: null,
        keys: ['from', 'to'],
        data: [],
        nodes: [],
        colorByPoint: false,
        color: 'white',
        borderColor: '#c1c1c1',
      }
    ]
  };

and the html

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions" 
  style="width: 100%; height: 100%; display: block;"
></highcharts-chart>

Answer 1

Set chart.width property to the appropriate value for you and change the default overflow style for the chart container.

JS:

chart: {
    width: 2000,
    ...
},

---

CSS:

#container {
    overflow: scroll !important;
}

---

Live example: https://jsfiddle.net/BlackLabel/t3b9fren/

API Reference: https://api.highcharts.com/highcharts/chart.width