ChartJS Annotation Hide /Show

ChartJS Annotation Hide /Show

chartjs annotation events
chartjs annotation label
chart js annotation vertical line
chart js annotation horizontal line
chartjs plugin annotation github
vue-chartjs annotation
chartjs plugins
chart annotation js github

I am using an annotation plugin to draw the horizontal line in my chart. Is there any way to hide & show annotation based on condition?

my code:

annotation: {

   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 50,
      borderColor: 'red',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
       backgroundColor: "red",
         content: "Benchmark",
         enabled: true,
          position : "left"
      }
   }, {
      id: 'hline2',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 30,
      borderColor: 'green',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
        backgroundColor: "green",
         content: "Target",
         enabled: true,
          position : "left"
      }
   }]

},

I dont know if this is the best answer but since Chartjs Annotation Plugin doesn't allow to show or hide annotations you can simple leave the annotation type blank and that will hide tha annotation.

then based on your condition you can add the type back again.

annotation: {

   drawTime: 'afterDatasetsDraw',
   annotations: [{
      id: 'hline1',
      type: '',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 50,
      borderColor: 'red',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
       backgroundColor: "red",
         content: "Benchmark",
         enabled: true,
          position : "left"
      }
   }, {
      id: 'hline2',
      type: '',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: 30,
      borderColor: 'green',
      borderDash: [8,5],
      borderWidth: 1,
      label: {
        backgroundColor: "green",
         content: "Target",
         enabled: true,
          position : "left"
      }
   }]

},

Hide/Show annotations? � Issue #95 � chartjs/chartjs-plugin , Hi, is there any way to hide & show the individual annotations with a property? ( Rather than removing the object from the annotations array?) Hiding an annotation simply just renders it invisible (this way event hooks still work, so you can mouse in/out etc.) Perhaps a later PR could be to include enable attr for annotations (i.e. completely remove them so they don't render at all and events don't trigger) Took me a year to get it done but oh well :)


Another option is to update the chart by switching drawtime from "afterDatasetsDraw" to null, based on your desired condition.

Something like:

function toggleAnnotation(chart) {
    if (chart.options.annotation.drawTime == "afterDatasetsDraw"){
        chart.options.annotation.drawTime = null;
     } else {
        chart.options.annotation.drawTime = "afterDatasetsDraw";
     }
     chart.update();
}

Any way to add dynamically annotation ? � Issue #103 � chartjs , If you wanted functionality like this then you probably need to bring it up with chart.js and not the annotation plugin. I'm using ChartJS in my project (more exactly ng2-charts for Angular 2 built on top of the original library). I see there is an option: legend: false|true However I find particularly annoying to


    function UnDraw() {
        window.myLine.config.data.datasets.forEach(function (dataset) {
            window.myLine.options.annotation.annotations.pop();
        });
        window.myLine.update();
    };
    function Draw(a) {
        window.myLine.options.annotation.annotations.push(
            {
                type: 'box',
                drawTime: 'afterDraw',
                xScaleID: 'x-axis-0',
                yScaleID: 'y-axis-0',
                xMax: a * 1000,
                xMin: a * 1000,
                yMax: MAXY,
                yMin: MINY,
                borderColor: 'rgba(255,102,0,1)',
                borderWidth: 1,
                backgroundColor: 'rgba(255,102,0,1)',
            });
        window.myLine.update();
    };

chart.js annotations onHover v2 - JSFiddle, display: true,. 24. },. 25. onHover: function(evt) annotations: lines. 40. },. 41. scales: {. 42. xAxes: [{ myLineChart.annotation.elements.line1.hidden = true;. 73. chartjs-plugin-annotation.js. An annotation plugin for Chart.js >= 2.4.0. This plugin draws lines and boxes on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales.


chart.js annotation box - JSFiddle, display: true,. 79. labelString: 'x axis'. 80. },. 81. }],. 82. yAxes: [{. 83. position: 'left',. 84. gridLines: {. 85. zeroLineColor: "rgba(0,255,0,1)". 86. },. 87. scaleLabel: {. Checkout the example of a JavaScript Line Chart that has annotations placed on top of the chart. Also included the sample code for it.


Chart.js Annotations add/remove sample, Scatter(ctx, { data: scatterChartData, options: { title: { display: true, text: 'Chart.js Scatter Chart' }, scales: { xAxes: [{ id: 'x-axis-1', Alt Opt 4 Toggle Console. Annotations Annotating the charts. Annotations in ApexCharts allows you to write custom text on specific data-points or on axes values. Y-axis annotations. Plotting annotations on the y-axis draw a horizontal line as well as a descriptive text label.


chartjs-plugin-annotation, Annotations for Chart.js. See http://www.chartjs.org/docs/#advanced-usage- creating-plugins `this` is bound to the annotation element. chartjs-plugin-datalabel must be loaded after the Chart.js library! Once imported, the plugin is available under the global property ChartDataLabels . This is useful to register/unregister the plugin afterward.