Annotation event not updating with Chart.js 2.7

[attack68]

It is entirely possible this is a bug with my code and understanding rather than the tool itself as it is very new to me,

I am using the following code to roughly test the tooltip hover mechanics for an annotation label:

[{
type: 'line',
mode: 'vertical',
// ..etc.
onMousemove: function(e) {
    console.log('Annotation', e.type, this);
    console.log(this.options.label.enabled);
    this.options.label.enabled = true;
    console.log(this.options.label.enabled);
},}]

the console shows the label.enabled property changing from false to true, but the chart doesn't display a change. I have tried linking with this.chartInstance.update() but still doesn't work.

The JS console error I receive is:
Unable to preventDefault inside passive event listener invocation.
dispatcher @ chartjs-plugin-annotation.js:261

I'll attempt to provide demo unless you quickly spot a mistake I'm making.

[compwright]

You will need to call update() on your chart instance to apply the change. See https://github.com/chartjs/chartjs-plugin-annotation/blob/master/samples/horizontal-line.html for a working example.

[attack68]

Actually I did try this after looking at that example and some other comments. However my problem still persists.

I reproduced the example you offer directly with the same errors as I receive in my own chart.

Could this be some other kind of dependency? I use Mac Os Sierra and tested in Chrome and Safari and no browser showed me annotations reacting to events.

[compwright]

@attack68 have you tried the example I linked to to see if it works in your environment?

What version of chartjs-plugin-annotation and chart-js are you using?

[compwright]

Also what version of Chrome are you running?

Can you go to chrome://flags and check your "Passive Event Listener Override" option (make sure it is set to Default)?

[attack68]

Yes I took the code you supplied in the link and substituted only two lines (the script sources):
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<script src="chartjs-plugin-annotation.js"></script>
My local version of annotation is * Version: 0.5.6.
Chrome I am running: Version 61.0.3163.100 (Official Build) (64-bit)
I have made sure my Passive Event Listener Override is set to default, it was.

I experience the same issue in Firefox and Safari, running Mac Os Sierra. I experience the issue on two separate Macs.

[compwright]

@attack68 Can you try downgrading to Chart.js 2.5?

[attack68]

Just downgraded, annotation events works with 2.5.0.
Additionally the plot looks different, instead of only scatter points in 2.7.0, in 2.5.0 it has a bezier curve through the scatter points.

[compwright]

You can turn off the line, see the Chart.js documentation.

[janaka120]

This also happens to me. This is what I using to generate chart.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<script src="chartjs-plugin-annotation.js"></script>

After I change my chart.js lib from v-2.7 to v-2.5, it works as I expected. :)

[osro]

Bump! This is forcing me to use 2.5 while I would need some features from the 2.7 as well.

[adeel3612]

@compwright any update on this issue? because i am having a problem. in updating.

[dinogit]

@compwright
Hi all,

I am also having same problem and downgrading to chart.js to 2.5.0 made my annotations totally disappear.

[compwright]

I'm not actively using this at this time with any of my projects and would welcome help if anyone wants to submit a pull request to update this plugin to work with 2.7. I'll get to it when I can, but I can't tell you when that will be.

[adeel3612]

@compwright i am quite new to the javascript and did not know much, so that i can go through the source files. I would love to help in this regard. If you can tell what problem should actually be in this problem may be i can dig in and can help you. I am a regular user of these plugins and chartjs and would love to help in this regard.

[dinogit]

Hi all,

I have able to make it work by destroying and creating chart again.

[nullpointer77]

I was able to work around this problem. Upon inspecting the Charts options, it looks like something has changed in Chart.js where it is coping the annotations array making it inaccessible from the annotations plugin. Aka, you try to add line into the annotations array and it doesn't appear in the charts options.annotations array.

To work around this I had to use something like this. . .

Chart.helpers.each(Chart.instances,(instance) => {
if(chartId == instance.canvas.id){
instance.options.annotation.annotations.push({ [annotation configuration here]});
}
}

rather than doing something like this. . .

annotations = [{. . .}]
options.annotation.annotations = annotations

It seems that this pass by reference approach doesn't work and you have to modify the property directly on the chart instance.

I tried to look at the annotations code to fix this but it's beyond me. Hopefully this work around at least helps people use chart.js 2.7.x until the author of this library gets a patch in place.

[nullpointer77]

Quick update here. I believe I have tracked the problem to chartjs and some work that was done leading up to 2.7.x release. At this point I'm not convinced it's a problem with this plugin, but rather something that needs to be fixed/weighed in on by the chartjs team. For details of my findings please refer to this link. chartjs/Chart.js#5111

[nullpointer77]

@compwright Per the thread I have opened with the chart.js team, I think some of the sample files need to be updated. I also think that you should put a section on the front page of the annotation as well as the draggable plugins github page stating that if someone is upgrading from 2.x to 2.7.x that they will likely need to change how/where they are populating the annotation data and getting it onto the chart object. I'm happy to update the sample files, but I'm not sure what kind of process I would need to follow to update the front page. Is this something you can do for me if I type up the verbiage?

[compwright]

@nullpointer77 you can update it by making a pull request with your changes to README.md. Thanks!

[DeanDavis]

I'm trying to understand if this issue is what I'm experiencing.
I've created a chart and added a vertical line annotation.
Now after updating some data I want to update the value of my vertical line.
chartObject.config.options.annotation.annotations[1].value = newValue; chartObject.update()

chartObject.options.annotation.annotations[1].value = newValue;
didn't work either.

But the line doesn't move, just stays at the original value.

Is this issue representative of what I'm trying to do and it not working?

[nullpointer77]

yes this is the same problem listed above. The ChartJS team has changed how this stuff works and arrays are copied around internally rather than by reference.

If you want further assistance please put a JSFiddle example of this out there and I can look.

[DeanDavis]

Here is a fiddle of what I'm trying to accomplish.
https://jsfiddle.net/AfterTen/x4rperfp/

You get the initial vertical line at 5.
But I would want to move the line to the inputted value when hitting update (and some new randomized data).

Only way I see to do it right now is destroy and recreate the entire chart.

Thanks.

[nullpointer77]

Please find a work around here. I'm not quite sure why but it looks like giving the annotation an ID really screws things up. I removed that and it seemed to work correctly. Sorry for the delay on this.

var vertLineValue = 5;
var dataSet = [];

var myChart;

document.getElementById("myButton").addEventListener("click", buttonClick);

myChart = updateChart(document.getElementById("pumpChart"), myChart);

function buttonClick() {
  myChart = updateChart(document.getElementById("pumpChart"), myChart);
}

function updateChart(ctx, chartObject) {
  dataSet = [];
  for (i = 0; i < 10; i++) {
    dataSet.push({
      'x': i,
      'y': Math.floor(10 * Math.random())
    });
  }

  vertLineValue = document.getElementById("lineValue").value

  if (ctx) {
    if (chartObject) {
      // update exsisting chart
      chartObject.data.datasets[0].data = dataSet;
      Chart.helpers.each(Chart.instances,
            (instance) => {            
                if ("pumpChart" === instance.canvas.id) {
                		instance.options.annotation.annotations.pop();
                    instance.options.annotation.annotations.push(
                    {
                    drawTime: "afterDatasetsDraw",                    
                    type: "line",
                    mode: "vertical",
                    scaleID: "xAxis",
                    value: vertLineValue,
                    borderColor: "red",
                    borderWidth: 2,
                    borderDash: [4, 4],
                    borderDashOffset: 5,
                    
                    label: {
                      position: 'bottom',
                      content: 'Vert Line',
                      enabled: true
                    }
                  });
                  
                  console.log(instance);                  
                  instance.update(0);
                  return;
              	}
            });
         
          
    } else {
      // Create New Chart
      chartObject = new Chart(ctx, {
        type: 'scatter',
        options: {
          scales: {
            yAxes: [{
              id: 'yAxis',
              type: 'linear',
              scaleLabel: {
                display: true,
                labelString: "y-Axis",
                fontColor: "#000000",
                fontSize: 14
              },
              ticks: {
                fontColor: "#000000",
                beginAtZero: true
              }
            }],
            xAxes: [{
              id: 'xAxis',
              type: 'linear',
              position: 'bottom',
              scaleLabel: {
                display: true,
                labelString: "x-Axis",
                fontColor: "#000000",
                fontSize: 14
              },
              ticks: {
                fontColor: "#000000",
                beginAtZero: true
              }
            }]
          },
          annotation: {
            annotations: [{
              drawTime: "afterDatasetsDraw",              
              type: "line",
              mode: "vertical",
              scaleID: "xAxis",
              value: "5",
              borderColor: "red",
              borderWidth: 2,
              borderDash: [4, 4],
              borderDashOffset: 5,
              label: {
                position: 'bottom',
                content: 'Vert Line',
                enabled: true
              }
            }]
          }
        },
        data: {
          datasets: [{
            label: 'Data',
            xAxisID: 'xAxis',
            yAxisID: 'yAxis',
            fill: false,
            showLine: true,
            borderJoinStyle: 'miter',
            data: dataSet,
            borderColor: "rgba(74,136,203,1)",
            lineTension: 0.0
          }]
        },
      });
    }

    return chartObject;
  }
}

[devdevx]

Thanks @nullpointer77 , I had the same problem and removing the "id" attribute solved it.

[osro]

Unable to preventDefault inside passive event listener invocation.

I'm not sure what that line in the link below actually does, but with 2.7.2 ChartJS it causes the error from the original post.

https://github.com/chartjs/chartjs-plugin-annotation/blob/master/src/events.js#L96
By removing that line, the error does not appear anymore and I haven't notice any issues (yet).

[lezsakdomi]

Note: @osro wrote

chartjs-plugin-annotation/src/events.js

Line 96 in 1643f3c

e.preventDefault();

[ThinkerBell1]

@nullpointer77 wrote:

Please find a work around here. I'm not quite sure why but it looks like giving the annotation an ID really screws things up. I removed that and it seemed to work correctly.

I had a different issue - need to display a tooltip only when hovering the annotation, and the mouse events didn't seem to respond correctly.
Funny enough, but my problem was solved when I added the ID to the annotation.
I have changed the fiddle mentioned above to demonstrate this issue, for use of anyone else confronting similar problem:

1. in this example: https://jsfiddle.net/h1d2Lz3k/ - annotation doesn't have an id, therefor updating its location works ok (as you have mentioned above) , but the mouse Events don't work.
2. in this example: https://jsfiddle.net/gubkzaop/ - annotation has an id, therefor updating its location doesn't work , but the mouse Events work ok...

[RieseIch]

Hi,
try this:

chart.annotation.elements = [];
chart.options.annotation.annotations = annotations;
chart.update();

where annotations are the array with annotations options.
This way helps me.

[alexjthomson]

Can confirm that the solution @RieseIch proposed works.

[etimberg]

I believe this is resolved in v3.0.0-beta.12 because we changed how options are resolved to avoid merging (and thus changing the underlying arrays). I tested the update sample and it works fine with v3.