react-chartjs-2 not rendering vertical arbitrary line using chartjs-plugin-annotation

Question

I am trying to show a arbitrary vertical line in my Line Chart. In line chart on X-Axis there is timestamp and on Y-Axis some data point integer.

I want to an arbitrary vertical line in my Line Chart on a specific timestamp. For that here is the options I have passed.

const options = {
    annotation: {
      annotations: [
        {
          drawTime: "afterDraw",
          id: "a-line-1",
          type: "line",
          mode: "horizontal",
          scaleID: "x",
          value: "12:15:45",
          borderColor: "red",
          borderWidth: 2
        }
      ]
    },
    maintainAspectRatio: false,
    scales: {
      y: {
        stepSize: 0,
        display: true,
        grid: {
          display: true, // Display y-axis grid lines
        },
      },
      x: { grid: { display: false } },
      Axes: [
        {
          grid: {
            display: false, // Hide vertical grid lines
          },
        },
      ],
    },
  };

import React from 'react';
import {
  Chart as ChartJS,
  LinearScale,
  CategoryScale,
  BarElement,
  PointElement,
  LineElement,
  Legend,
  Tooltip,
  LineController,
  BarController,
} from 'chart.js';
import { Chart } from 'react-chartjs-2';
import * as ChartAnnotation from 'chartjs-plugin-annotation'

ChartJS.register(LinearScale, CategoryScale, BarElement, PointElement, LineElement, Legend, Tooltip, LineController, BarController );

const LineBarChart = ({ data, options, id }) => {
  return <Chart id={id} type='bar' data={data} options={options} plugins={ChartAnnotation} />;
};

export default LineBarChart;

But it is not rendering? What could be possible issue?

Answer 1

First issue: As mentioned at the top in chartjs-plugin-annotation getting started:

This plugin needs to be registered. It does not function as inline plugin.

You need to register the plugin instead of using inline-plugin:

import annotationPlugin from 'chartjs-plugin-annotation';
ChartJS.register(annotationPlugin);

Second issue: You are configuring plugins incorrectly. It shouldn't be in an array. Setup plugins under options.plugins[plugin.id], where its id is annotation.

const options = {
  plugins:{
    annotation: {
      annotations: [
         {
          drawTime: "afterDraw",
          id: "a-line-1",
          type: "line",
          // mode: "horizontal", // This will be ignored as it's not a valid property
          scaleID: "x",
          value: "12:15:45",
          borderColor: "red",
          borderWidth: 2,
        }
      ]
    },
  },
  maintainAspectRatio: false,
  scales: {
    y: {
      stepSize: 0,
      display: true,
      grid: {
        display: true, // Display y-axis grid lines
      },
    },
    x: { grid: { display: false } }
  },
};

ChartJS.register(LinearScale, CategoryScale, BarElement, PointElement, LineElement, Legend, Tooltip, LineController, BarController);
ChartJS.register(annotationPlugin);

const LineBarChart = ({ data, options, id }) => {
  return <Chart id={id} type='bar' data={data} options={options}/>;
};

---

Note: Besides the two main issues, there are more problems:

1. When you do import * as ChartAnnotation from ..., you are importing all available named exports. The Annotation plugin have to be accessed by ChartAnnotation.default. Hence, passing the whole ChartAnnotation is not correct. Instead you can import ChartAnnotation from ... as provided above.

2. While the chart still renders correctly, the Axes scale isn't being set correctly. If it's intended as a customized scale, correct its format based on the its scale type. Again, it shouldn't be in an array.