Highcharts Annotations Not Rendering

I'm trying to dynamically add annotations to my high charts in React. I'm using the addAnnotation function to add a new annotation whenever a hover event is triggered on my app, bu

Solution 1:

I found that when I added annotations using Highcharts that the "linkedTo" function never worked despite my trials.

Despite adding a guid to my point, it never was able to apply it. I would suggest in your case adding it by x and y value, then finding the point that way instead. Here is how I have added annotations in the past successfully:

series.data.forEach(function(point) {

                varannotationObject=
                    {
                        id:point.id,
                        labelOptions: {
                            y:15,
                            verticalAlign:'bottom',
                            distance:25
                        },
                        labels: []
                    };

                }

                vartext=<gettextyouwanttopush>;annotationObject.labels.push(
                    {
                        point: {
                            xAxis:0,
                            yAxis:0,
                            x:point.x,
                            y:point.y
                        },
                        text:text
                    }

                );_chart.addAnnotation(annotationObject);});

I also found a bug in HighCharts when using remove annotations, as a heads up. Each point will need an id like above, but it should be called by this line:

           _chart.removeAnnotation(id);

It will remove the annotation, however you will get lots of complaints from highcharts if you try to do anything after, and it will break. I found the answer here, in annotations.js :

The red box is code I added. If you do removeAnnotation(ann.id), and it rerenders, it will fail because the labels object is null. Adding this check lets you do that without the labelCollectors failing.

Happy charting.