I am using chartjs for making a small project. I am getting some confusion and hard luck in editing the points.

Is there any function in this library I can bind an onclick event to which will show me a pop up and I can remove the point?

Here is the summary what I want:

1. Click on the point and a popup appear
2. After clicking on the remove button it removed the point and redraw the point. Right now i am only using simple line chart this is my jsFiddle

I am using chartjs 2.6

I am using chartjs for making a small project. I am getting some confusion and hard luck in editing the points.

Is there any function in this library I can bind an onclick event to which will show me a pop up and I can remove the point?

Here is the summary what I want:

1. Click on the point and a popup appear
2. After clicking on the remove button it removed the point and redraw the point. Right now i am only using simple line chart this is my jsFiddle

I am using chartjs 2.6

• javascript
• chart.js
• chart.js2
• chartjs-2.6.0

• No. that I know of! But you can open up a popup by triggering an event. Show some code for a better opinion. – funcoding Commented Nov 16, 2017 at 13:35
• i have only a jsfiddle of sample line chart nothing more. – fat_potato Commented Nov 16, 2017 at 13:41
• ok. show the link! – funcoding Commented Nov 16, 2017 at 13:41
• @funcoding jsfiddle/5rz5r9ag – fat_potato Commented Nov 16, 2017 at 13:46
• Yes you can. No pop-up in library but you can make your own. BTW, your question is probably gonna get closed. Better show us (include in question) what you've tried (code wise) so far to solve it. – ɢʀᴜɴᴛ Commented Nov 16, 2017 at 13:49

1 Answer 1

You can use the onclick event in the option to show the popup. Then you can check whether a point was clicked with getElementsAtEvent and if so remove it from the options and update the chart. I've updated your jsfiddle.

var option = {
    showLines: true,
    onClick: function(evt) {   
      var element = myLineChart.getElementAtEvent(evt);
      if(element.length > 0)
      {
        var ind = element[0]._index;
        if(confirm('Do you want to remove this point?')){
          data.datasets[0].data.splice(ind, 1);
          data.labels.splice(ind, 1);
          myLineChart.update(data);
        }
      }
    }
};