Plotly click event in Angular 2 application

Question

I am trying to use plotly java script click event in angular 2 project but it is returning the below error

Property 'on' does not exist on type 'HTMLElement'.

let myPlot = document.getElementById('donutChartId');
myPlot.on('plotly_click', function(data){
console.log(data.points[0].label);
});

Angular build is failing because of this.

Madhu Ranjan · Accepted Answer · 2016-11-30 17:30:18Z

1

.on() is a jquery method

If you are using Jquery in your application you may create a jquery object from selected element to use this method.

let myPlot = document.getElementById('donutChartId');

to

let myPlot = $(document.getElementById('donutChartId'));

Hope this helps!!

answered Nov 30, 2016 at 17:30

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Durga Prasad Over a year ago

I tried that before but it says "Cannot find name '$"

Madhu Ranjan Over a year ago

Have you added types for jquery? you should have types installed something like this should be in your depenedcies for types "@types/jquery": "1.10.31",', and also actual jquery library should be part of your application.

Sara · Accepted Answer · 2017-03-03 10:49:40Z

0

Think it is more of a compilation error. But your code will work. If you are concerned on the error. You can create a child class for ES6 HTMLElement class. Add the below code above in your component.

class CustomHTMLElement extends HTMLElement {
  constructor() {
    super();
  }
  on(event_type, cb) {
  }
}

And type cast in element selection

let myPlot = <CustomHTMLElement>document.getElementById('donutChartId');

answered Mar 3, 2017 at 10:49

Sara

366 bronze badges

Collectives™ on Stack Overflow

Plotly click event in Angular 2 application

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related