Trouble configuring chartjs-plugin-annotation in Chart.js

Question

I'm encountering difficulties while trying to configure the chartjs-plugin-annotation plugin in Chart.js.

Based on the documentation, I've installed version 0.5.7 of the plugin because I'm using Chart.js version 2.9.4. Here's how I registered the plugin in my code:

import Chart from "chart.js";
import annotationPlugin from "chartjs-plugin-annotation";

Chart.plugins.register(annotationPlugin);

I've also attempted the following registration method, but it didn't work either:

// Chart.pluginService.register(annotationPlugin); // Tried this but it doesn't work

Here's a simplified version of my options configuration:

scales: {
  yAxes: [
    {
      scaleLabel: {
        // ...
      },
      ticks: {
        // ...
      },
      gridLines: {
        // ...
      },
    },
  ],
  xAxes: [
    {
      gridLines: {
        // ...
      },
      ticks: {
        // ...
      },
    },
  ],
},
maintainAspectRatio: false,
legend: {
  // ...
},
tooltips: {
  // ...
},

The problem lies with the annotation section in my options:

annotation: {
  annotations: [
    {
      type: "line",
      mode: "horizontal",
      scaleID: "yAxes",
      value: 2.62,
      borderColor: "white",
      borderWidth: 4,
    },
  ],
},

Can someone help me identify what I'm doing wrong with my chartjs-plugin-annotation configuration in Chart.js? Your guidance would be greatly appreciated. Thank you!

Answer 1

It looks like you are trying to implement the annotations plugin as if you would integrate it to a current chart.js version. E.g. your define your annotations in plugins.

This is an example that works with the given versions. Please note that I added the annotation object right away in options what gives the wanted annotation. (In my example in form of a red line.)

import React, { useEffect, useRef } from "react";
import Chart from "chart.js";
import annotationPlugin from "chartjs-plugin-annotation";

Chart.pluginService.register(annotationPlugin);

const LineGraph = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef?.current) {
      const chartToDraw = chartRef.current.getContext("2d");

      new Chart(chartToDraw, {
        type: "line",
        data: {
          labels: ["Jan", "Feb", "March"],
          datasets: [
            {
              label: "Sales",
              data: [86, 67, 91]
            }
          ]
        },
        options: {
          annotation: {
            drawTime: "afterDatasetsDraw", // (default)
            events: ["click"],
            dblClickSpeed: 350, // ms (default)
            annotations: [
              {
                drawTime: "afterDraw",
                id: "a-line-1",
                type: "line",
                mode: "horizontal",
                scaleID: "y-axis-0",
                value: "25",
                borderColor: "red",
                borderWidth: 2
              }
            ]
          }
        }
      });
    }
  }, []);

  return (
    <div className={{ width: "100%", height: 500 }}>
      <canvas id="myChart" ref={chartRef} />
    </div>
  );
};

export default LineGraph;

You can see it working here: https://codesandbox.io/s/chart-js-2-9-4-annotation-example-f3h7d?file=/src/LineGraph.js

Chart.js plugin annotation documentation for 0.5.7: https://www.chartjs.org/chartjs-plugin-annotation/0.5.7/