CODEWITHSUNDEEP
javascriptangularhighchartsangular2-highcharts
indra257
indra257

Reputation: 86

Angular2-Highcharts: Click event on custom legend title

Below is the highcharts that I have created. I added a custom legend title, which gives me the count(2000). I am trying to have a click event on this 2000, but couldn't able to add it.

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

My legend code:

 legend: {
                useHTML: true,
                enabled: true,
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'vertical',
                x: 0,
              y:30,
                symbolHeight: 12,
                itemMarginBottom: 1,
                symbolWidth: 25,
                symbolRadius: 1,
                labelFormatter: function () {
                    return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px">' + this.name +
                    '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                    '</span></div> ';
                },
                title: {
            text: ' Issues<br/><span style="font-size: 9px; color: #666; font-weight: normal">Total: 2000</span>' 
            //Click event on 2000 
            // call donut service's get total info. Need not have to pass any variable. 

        },


            }

Upvotes: 0

Views: 1815

Answers (1)

morganfree
morganfree

Reputation: 12472

You can attach onclick event on chart load event.

 template: `
    <chart  [options]="options" (load)="onChartLoad($event.context)">
    </chart>

In the component

onChartLoad(chart) {
  this.chart = chart;
  var t = chart.legend.title.element.children[0].children[1]
  t.onclick = () => this.onLegendTitleClick()
}

onLegendTitleClick() {
  console.log('title clicked', this)
}

example: https://plnkr.co/edit/kxEgwfV8iKUnBkIZlYxv?p=preview

Upvotes: 1

Related Questions