Highcharts - Exporting gantt charts not showing previous interaction by user

Question

If a user expands a collapsed item in a Highcharts Gantt chart I want that to be represented in the image exports (print is fine). Sadly it always seems to export the original chart with all items collapsed:

https://codepen.io/lordhix/pen/abdEROJ?editors=1010

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>

JAVASCRIPT

var today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);


// THE CHART
Highcharts.ganttChart('container', {
  title: {
    text: 'Highcharts Gantt With Subtasks'
  },
  xAxis: {
    min: today.getTime() - (2 * day),
    max: today.getTime() + (32 * day)
  },
  series: [{
    name: 'Project 1',
    data: [{
      name: 'Planning',
      id: 'planning',
      start: today.getTime(),
      end: today.getTime() + (20 * day),
      collapsed : true
    }, {
      name: 'Requirements',
      id: 'requirements',
      parent: 'planning',
      start: today.getTime(),
      end: today.getTime() + (5 * day)
    }, {
      name: 'Design',
      id: 'design',
      dependency: 'requirements',
      parent: 'planning',
      start: today.getTime() + (3 * day),
      end: today.getTime() + (20 * day)
    }, {
      name: 'Layout',
      id: 'layout',
      parent: 'design',
      start: today.getTime() + (3 * day),
      end: today.getTime() + (10 * day)
    }, {
      name: 'Graphics',
      parent: 'design',
      dependency: 'layout',
      start: today.getTime() + (10 * day),
      end: today.getTime() + (20 * day)
    }, {
      name: 'Develop',
      id: 'develop',
      start: today.getTime() + (5 * day),
      end: today.getTime() + (30 * day),
      collapsed : true
    }, {
      name: 'Create unit tests',
      id: 'unit_tests',
      dependency: 'requirements',
      parent: 'develop',
      start: today.getTime() + (5 * day),
      end: today.getTime() + (8 * day)
    }, {
      name: 'Implement',
      id: 'implement',
      dependency: 'unit_tests',
      parent: 'develop',
      start: today.getTime() + (8 * day),
      end: today.getTime() + (30 * day)
    }]
  }]
});

I know for other charts this seems to work fine, e.g. drilling down into a tree chart:

https://www.highcharts.com/demo/treemap-large-dataset

Or selecting another segment in a pie chart seems to be represented as well:

https://www.highcharts.com/demo/pie-basic

Where am I going wrong? I have even tried using the normal exporting.js (instead of the Gantt module version) within the Gantt example, but it has exactly the same issue.

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-07-06T14:51:11

I think that it is a bug that it is not working as you expected. I reported it on Highcharts Github issue channel where you can follow this thread.

Link: https://github.com/highcharts/highcharts/issues/13838

And here is a workaround: https://jsfiddle.net/BlackLabel/cy27xwz5/

  chart: {
    events: {
      render() {
        let chart = this;

        chart.series[0].points.forEach(point => {
          if (point.collapsed) {
            chart.series[0].points.forEach(p => {
              if (p.parent === point.id) {
                if (p.visible) {
                  point.update({
                    collapsed: false
                  })
                }
              }
            })
          } else if (point.collapsed === false) {
            chart.series[0].points.forEach(p => {
              if (p.parent === point.id) {
                if (!p.visible) {
                  point.update({
                    collapsed: true
                  })
                }
              }
            })
          }
        })
      }
    }
  },

API: https://api.highcharts.com/gantt/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.Point#update

Highcharts - Exporting gantt charts not showing previous interaction by user

1 Answers