CODEWITHSUNDEEP
javascriptangularhighcharts
carreankush
carreankush

Reputation: 651

How to get the Div id of charts in highcharts on click of it in angular 6

I have a simple Line chart of highcharts in angular6. I need to get the div id of the chart of which its belongs to onclick of the chart.Here div id is chart1,so I need to get that in alert and also need to call from outside of chart.I have already tried but its not working,its showing blank.Is there any solution for it.Here is the code below.Live demo https://stackblitz.com/edit/angular-yw3xwa?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<div (click)="onClickMe($event)" id="chart1"></div>

app.component.ts

declare var require: any;
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  clickMessage = '';
  name = 'Angular';
  onClickMe(event) {
    alert(event.target.id);
  }
  ngOnInit(){
  this.chartFunc('chart1');
  }

  chartFunc(chartId){
  Highcharts.chart(chartId,{
   chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },

      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         }
      ]
   });
}
}

Upvotes: 3

Views: 1557

Answers (1)

Bhagwat Tupe
Bhagwat Tupe

Reputation: 1943

There is no need to pass the entire event (unless you need other aspects of the event than you have stated). In fact, it is not recommended. You can pass the element reference with just a little modification.

Solution 1

html

<div #referenceKeyName (click)="onClickMe(referenceKeyName)" id="chart1"></div>

component

onClickMe(referenceKeyName) {
  alert(referenceKeyName.id);
}

Technically, you don't need to find the button that was clicked, because you have passed the actual element.

Solution 2

html

<div (click)="onClickMe($event)" id="chart1"></div>

component

onClickMe(event: Event): void {
    let elementId: string = (event.target as Element).id;
    // do something with the id... 
}

Upvotes: 2

Related Questions