CODEWITHSUNDEEP
javascripthighchartstreemap
Srijan Sharma
Srijan Sharma

Reputation: 693

Click event in treemap in highcharts

How can i create an onclick handler when a last level of the treemap is clicked?

This is my code which creates a treemap using highcharts (https://jsfiddle.net/r5e0nLkh/2/).

$('#container').highcharts({
series: [{
 type: "treemap",
 allowDrillToNode: true,
 alternateStartingDirection: true,
 levelIsConstant: false,
 levels: [{
   level: 1,
   layoutAlgorithm: 'suarified',
   dataLabels: {
     enabled: true,
     align: 'left',
     verticalAlign: 'top',
     style: {
       fontSize: '15px',
       fontWeight: 'bold'
     }
   }
 }, {
   level: 2,
   borderWidth: 0,
   layoutAlgorithm: 'stripes',
   dataLabels: {
     enabled: false
   },
   color: 'blue'
 }],
 data: data
}],
title: {
  text: 'Intent Distribution'
}
});

Now i want to create a click event at the last level e.g if i click on say promo, then i should get to see the subparts and after that if i click any subpart, i could be able to attach an event listener to that. I could see the click event for linechart in highcharts tutorial but not sure how to use in for treemap.

Upvotes: 2

Views: 2171

Answers (1)

Srijan Sharma
Srijan Sharma

Reputation: 693

Solved the problem by adding below method:

$('#container').highcharts({
    plotOptions: {
    series: {
        events: {
            click: function (event) {
                if(event.point.node.childrenTotal == 0 ){//since last node will have zero childrens
                   //Perform Task on leaf or last node
            }
        }
    }
},....}

event.point.node.childrenTotal will contain the number of children's for the label clicked.

Upvotes: 2

Related Questions