CODEWITHSUNDEEP
highcharts
user1757006
user1757006

Reputation: 775

How do you remove an annotation from Highcharts?

I am using Highcharts 6. I am using the following event to get my data point id and to open popover with a simple form.

plotOptions: {
    series: {
        point: {
            events: {
                click: function(e) {
                    selected_point = e.point.id
                    $('#chart').popover("toggle")
                }
            }
        }
    }
}

When the form is submitted, an annotation is set on that data point.

$('body').on('click', '#save_annotation', function() {
    var text = $("#annotationForm").val()
    myChart.addAnnotation({
        labels: [{
            point: selected_point,
            text: text
        }]
    })
    $('#chart').popover("toggle")
})

So far this is working great. I need a way to modify and delete an existing annotation. It seems that I should be using removeAnnotation() but I can't seem to figure out how to use it. The documentation indicates that I need to pass an annotation id. Where can I find this id? When I call myChart.annotations I can see an array of objects. Each object is an annotation but there is no id property.

I was able to use a forEach loop to delete a specific annotation with the destroy() method but it leaves an item in the annotations array and is not recommended.

What is the proper way to remove an annotation? How can I get the id for the annotation? This post indicates that addAnnotation() returns the annotation which it does but the returned object has no as shown. For example in my case annotation.id returns undefined.

Upvotes: 1

Views: 1616

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

Much like with points, you have to set the id of the annotation. Then you can reference it in the removeAnnotation function.

$('body').on('click', '#container', function() {
    var text = 'Hi there';
    if (toggle) {
       myChart.addAnnotation({
          id: 'one',
          labels: [{
              point: 'one',
              text: text
          }]
      });   
    } else {
        myChart.removeAnnotation('one');
    }
    toggle = !toggle;
})

http://jsfiddle.net/0pde1tfq/

Upvotes: 2

Related Questions