Angular2-Highcharts: Click event on custom legend title

Question

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. 

        },


            }

score 1 · Accepted Answer · answered May 17 '17 at 12:28

1

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

answered May 17 '17 at 12:28

morganfree

12,254
1
14
21

Thanks a lot it works. For legend items click, I am trying to have "this" of class. But "this" has only chart properties but not the class. So I am unable to use the local variable of my service(this.donutservice). In the LegendTitleClick, I am able to get my local variable of the service. legendItemClick: function (e) { console.log(this); return false; } – indra257 May 17 '17 at 13:25
you need to correctly set up a service for the component. Set provider and the correct constructor with donut service. If you want to use this as the component in hc events you need to bind this properly. See example https://plnkr.co/edit/SWGSCNCLz7KJgjTDUaRY?p=preview – morganfree May 17 '17 at 13:49
It really helped. Thanks – indra257 May 17 '17 at 13:55
This may sound little crazy. It actually worked great in the morning, but suddenly it throws error in the console "Cannot read property 'children' of undefined".at DonutComponent.webpackJsonp.632.DonutComponent.onChartLoad (http://localhost:4200/main.bundle.js:1025:55) at CompiledTemplate.proxyViewClass.View_DonutComponent0.handleEvent_7 (/AppModule/DonutComponent/component.ngfactory.js:83:34) – indra257 May 17 '17 at 19:29
Did you get a chance to see my comment. – indra257 May 17 '17 at 21:09
It looks like the dom element cannot be found - have you modified your legend? You can make it a little more safe by defining a css class to the dom element and then try to find that element https://plnkr.co/edit/W8Co6njuEW4Baa5lk9K3?p=preview – morganfree May 18 '17 at 11:09
I didn't make any changes, but that is surprising why it stopped working all of a sudden. With the new suggestion that you have provided, I am getting compile error saying --"Property 'onclick' does not exist on type 'Eleme nt'.) – indra257 May 18 '17 at 16:42
Please have a look at this plnkr. Here I am unable to get the click event and the alert box(even in my application also). But couldn't able to get the service local variable(this.donutService) because "this" doesn't have the class properties. – indra257 May 18 '17 at 17:13
any help would be highly appreciated. – indra257 May 19 '17 at 18:45
Did you get a chance to look in to this. – indra257 May 21 '17 at 20:41
I do not see any plunkr in your comment. As for the error, it is about typing in ts https://forum.highcharts.com/highcharts-usage/how-to-make-dynamic-chart-using-data-from-mysql-with-node-js-t36229/?hilit=%20socket – morganfree May 22 '17 at 10:32
I am still facing the issue "Property 'onclick' does not exist on type 'Element'". at subtitle.onclick = (e) => this.onLegendTitleClick(e) – indra257 May 25 '17 at 18:15
There is an issue if I have same component multiple times. As class is same it is creating an issue. – indra257 Jun 13 '17 at 15:42
So the best solution would be use your initial idea. but in that case I am unable to get chart.legend.title.element.children[0].children[1], but in plnkr I am seeing it – indra257 Jun 13 '17 at 17:23
Post a plunkr with the behavior you describe - It is impossible to debug with the actual code. – morganfree Jun 16 '17 at 09:16

Angular2-Highcharts: Click event on custom legend title

1 Answers1