Sunburst drilldown not working after updating data of a second chart

MOberlaender commented 4 years ago

Problem I have a page containing two charts. By drillling into the sunburst the second chart should give some details about the selected element from the sunburst chart. After updating the detail chart the sunburst drilldown functionallty is not working anymore.

I've added a minimalistic reproduction using CodeSandbox https://codesandbox.io/s/vue-template-6dukg Clicking the button loads the data into the Sunburst. Every drilldown inside the sunburst switches the series of the barchart. After some bar chart series changes. The Drilldown breaks.

Denyllon commented 4 years ago

Hi @MOberlaender ,

First of all, really sorry for the delay in reply. I will take a look on this issue this week, and back to you with more detailed info. Please calmly wait for the answer.

Kind regards!

Denyllon commented 4 years ago

Hi @MOberlaender ,

Thank you for waiting. The problem is not actually with this wrapper, but with the Highcharts itself. I've reported it directly in the Highcharts repository, so you can watch the progress of that case here: https://github.com/highcharts/highcharts/issues/13937

Temporarily, until the problem will be fixed, you can apply the below fix in your app.js file:

(function(H) {
  H.seriesTypes.sunburst.prototype.init = function(chart, options) {
    var series = this,
      colorMapSeriesMixin = H.colorMapSeriesMixin;

    series.eventsToUnbind = [];
    // If color series logic is loaded, add some properties
    if (colorMapSeriesMixin) {
      this.colorAttribs = colorMapSeriesMixin.colorAttribs;
    }
    // Handle deprecated options.
    series.eventsToUnbind.push(H.addEvent(series, "setOptions", function(event) {
      var options = event.userOptions;
      if (
        H.defined(options.allowDrillToNode) &&
        !H.defined(options.allowTraversingTree)
      ) {
        options.allowTraversingTree = options.allowDrillToNode;
        delete options.allowDrillToNode;
      }
      if (
        H.defined(options.drillUpButton) &&
        !H.defined(options.traverseUpButton)
      ) {
        options.traverseUpButton = options.drillUpButton;
        delete options.drillUpButton;
      }
    }));
    H.Series.prototype.init.call(series, chart, options);
    // Treemap's opacity is a different option from other series
    delete series.opacity;
    if (series.options.allowTraversingTree) {
      series.eventsToUnbind.push(H.addEvent(series, "click", series.onClickDrillToNode));
    }
  };
})(Highcharts);

Live example: https://codesandbox.io/s/vue-template-5r2nx

highcharts / highcharts-vue

Sunburst drilldown not working after updating data of a second chart #154