harrykapBW
Posts: 2
Joined: Thu Oct 12, 2017 4:54 pm

chart.update() function and annotations

I am using the new support for declarative annotations added in version 6.0 and am finding that the chart.update method isn't allowing me to update them like I can for series and the X, Y axes.

Here's a JS Fiddle showing the issue: https://jsfiddle.net/2v89Lvgj/10/

Would like to know if this is a bug, and feature that will be added, or if there is a workaround.

Thanks
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

hi harrykapBW,

You can't update annotations by using Chart.update() function, because there isn't functionality yet, which can support placing annotations param passed through configuration object to update(), but all is not lost.
You could achieve effect you expect, by using two functions of Chart object, namely Chart.removeAnnotation() and Chart.addAnnotation().
Before using remove function, you should set id param on annotation that you want to delete, and pass this id as a param to removeAnnotation(). Next, you can add new annotation by the second function I mentioned. I prepared live example of using this functions, so take a look on it.

Live working: https://jsfiddle.net/daniel_s/g5j3wpp7/

Best regards!
Daniel Studencki,
Highcharts Developer
harrykapBW
Posts: 2
Joined: Thu Oct 12, 2017 4:54 pm

Re: chart.update() function and annotations

Thanks Daniel. That certainly will work for me.

Both Chart.addAnnotation() and Chart.removeAnnotation() are not listed in the current documentation http://api.highcharts.com/class-referen ... arts.Chart. Perhaps they should be?
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

We are working on it. Appreciate that, and thank you for your perceptivity.

Best regards!
Daniel Studencki,
Highcharts Developer
manometer114
Posts: 7
Joined: Tue Nov 28, 2017 10:53 pm

Re: chart.update() function and annotations

Hello Daniel,

Thanks for your solution, the addAnnotation(), and removeAnnotation() functions work as required. However, we are using zooming/panning in our charts, and doing any type of annotation add/remove seems to break this functionality:
https://jsfiddle.net/docfandan/2o52eftt/

To reproduce: click/drag to zoom, then hold shift and click drag to pan. This works. Now click the "update" button, then try to zoom/pan again, which fails.

Any help is appreciated!

Thanks,
Mano
manometer114
Posts: 7
Joined: Tue Nov 28, 2017 10:53 pm

Re: chart.update() function and annotations

Daniel,

Another thing I noticed is that when I try to update the series multiple times (i.e. click update several times), the update fails after the first attempt.. Are there any workarounds for this?

EDIT: Just realized that my previous post and this post are failing due to the same reason: updates to the chart work when calling "addAnnotation()" and "removeAnnotation()" for the first time, but any updates to the chart (add another annotation, zoom + pan) fail. This is evident in both your and my jsfiddles.

Thanks,
Mano
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

hi manometer114,

Those problems are all related with one the same bug in annotations.js plugin. I didn't report the bug yet, but I will do that in a few days, so now I could give you quick fix for those.
You should override Annotation.prototype.init function. Here is the code of override:

Code: Select all

  (function(H) {
    H.Annotation.prototype.init = function() {
      var anno = this;
      H.each(this.options.labels || [], this.initLabel, this);
      H.each(this.options.shapes || [], this.initShape, this);

      // Push the callback that reports to the overlapping-labels module which
      // labels it should account for.
      this.chart.labelCollectors.push(function() {
        var labels = [];
        H.each(anno.labels || [], function(label) {
          if (!label.options.allowOverlap) {
            labels.push(label);
          }
        });
        return labels;
      });
    }
  })(Highcharts)
Please take a look at this live example: https://jsfiddle.net/daniel_s/gvf5ehj6/

Best regards!
Daniel Studencki,
Highcharts Developer
manometer114
Posts: 7
Joined: Tue Nov 28, 2017 10:53 pm

Re: chart.update() function and annotations

Daniel,

Thank you very much for your solution, worked like a charm! :D

Regards,
Mano
manometer114
Posts: 7
Joined: Tue Nov 28, 2017 10:53 pm

Re: chart.update() function and annotations

Daniel,

After some extensive testing, another issue (I think related to the above) that I am facing is that when zooming+panning with annotations shown on screen, any annotations attached to a bar series seems to not get anchored to its datapoint. Annotations on splines work perfectly as expected.

To reproduce:
1.) https://jsfiddle.net/docfandan/s1u85hae/
2.) click + drag to zoom into any section of the chart
3.) hold shift and click+drag to pan, and you will see that the annotation attached to the bar "Bar Ratios" will not remain anchored. It seems to hover above any datapoint visible.

Any solutions to this issue would be great.

Thanks,
Mano
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

hi manometer114,

Thank you for reporting us a problem. I also deeply tested it, and I saw, that annotations are anchored on plotArea only when there is more than 50 points in bar/column series. In my opinion it's a bug without doubt, so I created a new issue on our GitHub repository, and you can watch the progress of fixing it here: https://github.com/highcharts/highcharts/issues/7534

At this moment you could set your annotations manually by assigning to it new object with x,y,xAxis,yAxis keys and their values, until the bug will be fixed. Take a look at example below:

Live example:
https://jsfiddle.net/u45r8q11/

API Reference: https://api.highcharts.com/highcharts/a ... bels.point

Best regards!
Daniel Studencki,
Highcharts Developer
Bill_VA
Posts: 3
Joined: Thu Apr 20, 2017 4:55 pm

Re: chart.update() function and annotations

Daniel, you are so the man. This was perfect timing as I just came upon this issue too. I figured out the addAnnotation function, but when I called removeAnnotation after updating all the series of the chart, it would throw an error like harrykapBW saw. Your workaround fixed this issue and now my chart is working well. I will subscribe to this thread so I'll know when the bug is fixed.

Thanks so much.
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

hi,

The solution that I was sent you before is (as I said) only workaround, but I took a little closer look on this bug and found a general reason of that errors, so I prepared better example, which will be probably an official fix for that on few days. Please change your code for this:

Code: Select all

(function(H) {
    H.Annotation.prototype.init = function() {
      var anno = this;
      H.each(this.options.labels || [], this.initLabel, this);
      H.each(this.options.shapes || [], this.initShape, this);

			// Save collector function directly in Anno object
      anno.collector = function() {
          var labels = [];
          H.each(anno.labels, function(label) {
            if (!label.options.allowOverlap) {
              labels.push(label);
            }
          });
          return labels;
        }
        // Push the callback that reports to the overlapping-labels module which
        // labels it should account for.
      this.chart.labelCollectors.push(anno.collector);
    }

    H.Annotation.prototype.destroy = function() {
      var chart = this.chart,
      	labelCollectors = chart.labelCollectors,
        collector = this.collector;

      H.each(this.labels, function(label) {
        label.destroy();
      });

      H.each(this.shapes, function(shape) {
        shape.destroy();
      });
			
      // Delete annotation collector from labelColectors
			H.erase(labelCollectors, collector)
      H.destroyObjectProperties(this, chart);
    }
  })(Highcharts)
Regarding the problems with displaying annotations which shoudn't be visible after zooming and pannig, Kacper made some workaround, which is described in GitHub thread, so you could use it until the availability of official fix.

Best regards!
Daniel Studencki,
Highcharts Developer
Bill_VA
Posts: 3
Joined: Thu Apr 20, 2017 4:55 pm

Re: chart.update() function and annotations

thanks Daniel
haiku
Posts: 166
Joined: Tue Jul 26, 2011 8:22 am
Contact: Website

Re: chart.update() function and annotations

Hello,
I am struggling with annotation.update, do you have a working example ?
Here's the non working example :lol:

Thanks
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: chart.update() function and annotations

hi haiku,

Your code not works, because there is no update() function on chart.annotations array. At this time, there is no function which gives ability to freely updating annotations. You should use removeAnnotation() as well as addAnnotation() functions. Please refer to example below (and preferably this whole topic), where I shown how to use it correctly.

Live example: https://jsfiddle.net/daniel_s/g5j3wpp7/

Best regards!
Daniel Studencki,
Highcharts Developer

Return to “Highcharts Usage”