0

Im using highcharts-angular library for rendering a sunburst chart. Im able to drill down and capture the event by using the click event. But im not able to capture the drill up event when i click on the back button. i tried using the drillup event, but that doesnt seem to work.

I have imported drilldown modules as well. Given below is my code.

TS:

import HC_sunburst from 'highcharts/modules/sunburst';
import Drilldown from 'highcharts/modules/drilldown';
HC_sunburst(Highcharts);
HC_stock(Highcharts);
Drilldown(Highcharts);

highcharts1: typeof Highcharts = Highcharts;
chartOptions1: Highcharts.Options;

    this.chartOptions1 =  {
      chart: {
        height: '100%'
      },
      title: {
        text: ''
      },
      subtitle: {
        text: ''
      },
      series: [{
        type: 'sunburst',
        data: sunburstSampleData,
        allowDrillToNode: true,
        cursor: 'pointer',
        events: {
          click: (e) => {
            alert('drilldown');
          },
          drillup: (e) => {
            alert('drillup');
          }
        },
        dataLabels: {
          format: '{point.name}',
          filter: {
            property: 'innerArcLength',
            operator: '>',
            value: 16
          }
        },
        levels: [{
          level: 1,
          levelIsConstant: false,
          dataLabels: {
            filter: {
              property: 'outerArcLength',
              operator: '>',
              value: 64
            }
          }
        }, {
          level: 2,
          colorByPoint: true
        },
        {
          level: 3,
          colorVariation: {
            key: 'brightness',
            to: -0.5
          }
        }, {
          level: 4,
          colorVariation: {
            key: 'brightness',
            to: 0.5
          }
        }]

      }]
    };

HTML

<highcharts-chart *ngIf="chartOptions1"
    [Highcharts]="highcharts1"
    [options]="chartOptions1"
    style="width: 100%; height: 500px; display: block;">

package.json

"highcharts": "^7.1.1",
"highcharts-angular": "^2.4.0",

Am i missing anything here? Please help me out.

Anand
  • 13
  • 5

1 Answers1

0

It is not working because there is no such thing as drilldown() on the series.events. To make it work you can use the chart.events.drilldown / chart.events.drillup.

API references:
https://api.highcharts.com/highcharts/chart.events.drillup https://api.highcharts.com/highcharts/chart.events.drilldown

Mateusz Kornecki
  • 765
  • 6
  • 18
  • Could you reproduce the issue in an online editor (like stackblitz) that I could work on? It would be much easier to find the source of the problem then. Basic template: https://stackblitz.com/edit/highcharts-angular-basic-line – Mateusz Kornecki Jul 16 '20 at 08:14
  • couldnt make the chart work in an online editor. can you show me a working example of sunburst chart with drillup event ? – Anand Jul 16 '20 at 09:27
  • ok, i just tried something and it worked. so, `chart.events.click` caught the drillup event and `chart.series.events.click` caught the drilldown event. weird! but thanks anyway! – Anand Jul 16 '20 at 10:03
  • Sorry, it seems that I was wrong. The properties that I posted above are not working because treemap/sunburst series is using a different type of a drilldown. You can read more about that in this GitHub issue thread: https://github.com/highcharts/highcharts/issues/9812 – Mateusz Kornecki Jul 16 '20 at 10:34
  • ah ok..no problem..but if you could show me an example of sunburst chart (using angular not vanilla js) with drill up event captured, it would be really helpful. – Anand Jul 16 '20 at 11:44
  • Sure, here you are: https://jsfiddle.net/BlackLabel/7uL10r9c/ I modified a solution from the GitHub thread so it can work with the sunburst. – Mateusz Kornecki Jul 16 '20 at 12:04