CODEWITHSUNDEEP
javascriptchart.jschart.js2chartjs-2.6.0
fat_potato
fat_potato

Reputation: 653

Can I bind an onclick event and edit a point in chartjs

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

Upvotes: 4

Views: 7837

Answers (1)

Shiffty
Shiffty

Reputation: 2156

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);
        }
      }
    }
};

Upvotes: 7

Related Questions