Highcharts Gantt Scroll issue

author(s): Torstein Hønsi

by esantiagovieira

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="container"></div>

JavaScript

let allowChartUpdate = true;

Highcharts.ganttChart('container', {
  chart: {
		animation: false,
    scrollablePlotArea: {
      minHeight: 450
    },
    events: {
      render: function() {
        if (allowChartUpdate) {
          allowChartUpdate = false;
          
          this.update({
            chart: {
              scrollablePlotArea: {
                minHeight: this.seriesGroup.getBBox(true).height + this.plotTop + 30
              }
            }
          });

          allowChartUpdate = true;
        }
      }
    }
  },
  yAxis: {
    type: "treegrid",
    grid: {
      enabled: true,
      columns: [{
          title: {
            text: "Cellules"
          },
          labels: {
            format: "{point.cell}"
          }
        },
        {
          title: {
            text: "Métier"
          },
          labels: {
            format: "{point.name}"
          }
        }
      ]
    }
  },
  xAxis: {
    currentDateIndicator: true,
    type: "datetime",
    min: moment("2021-02-08T00:00:00.000").valueOf(),
    max: moment("2021-02-15T00:00:00.000").valueOf()
  },
  // scrollbar: {
  //   enabled: true
  // },
  series: [{
    name: "",
    data: getSeries()
  }]
});

function getSeries() {
  return [{
      name: "Cellule A",
      id: "CelluleA",
      color: "#3498db"
    },
    {
      name: "Cellule B",
      id: "CelluleB",
      color: "#ff9f43"
    },
    {
      name: "Cellule C",
      id: "CelluleC",
      color: "#ee5253"
    },
    {
      name: "Cellule D",
      id: "CelluleD",
      color: "#3e0d69"
    },
    {
      name: "Cellule F",
      id: "CelluleF",
      color: "#f5bf27"
    },
    {
      name: "Cellule E",
      id: "CelluleE",
      color: "#417505"
    },
    {
      name: "102",
      id: "172851_4_proc_0",
      parent: "CelluleE",
      start: 1613156040000,
      end: 1613160000000,
      ofCode: "172851",
      color: "#417505"
    },
    {
      name: "102",
      id: "172851_4_proc_1",
     ...