Highcharts gantt collapse treegrid columns

Question

We use the grid columns options in a Gantt chart and it would be very appreciable to be able to collapse/expand the treegrid columns with a custom button on the chart.

Is there a way to achieve this ?

In the following sample : https://jsfiddle.net/vegaelce/809a6b5z/ I added a custom button

render(events) {
      let chartVal = this;
       chartVal.renderer
       .button("+/-", 10, 10, (e) => {})
       .attr({
         zIndex: 3,
         width: 15,
         height: 9,
       })
       .on("click", function () {
       //todo
       })
      .add();
      },

Is it possible to write the function to fold/unfold the "Assignee", "Est. days" & "End date" columns ?

Answer 1

Yes, it is possible to collapse specific columns by updating the yAxis.grid.columns array using the appropriate axis update method: xAxis.update(). You can add a custom property that will allow you to filter the array with columns accordingly.

Highcharts.ganttChart('container', {
  chart: {
    events: {
      render: function() {
        const chart = this;

        if (!chart.toggleBtn) {
          chart.visibleAdditional = true;
          chart.toggleBtn = chart.renderer.button('+/-', 10, 10, function() {
            chart.visibleAdditional = chart.visibleAdditional ? false : true;

            chart.yAxis[0].update({
              grid: {
                columns: gridColumns.filter(item => {
                  return chart.visibleAdditional || !item.optional
                })
              }
            })
          }).add();
        }
      }
    }
  },
  ...
});

Demo: https://jsfiddle.net/BlackLabel/2vLfrgos/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update