Cannot find a way to correctly use chartjs annotation plugin with react

Question

I am currently trying to use the plugin chartjs-plugin-annotation in my react project. Unfortunately, it is not working...

He is my implementation:

import React, { Component } from "react";
//import "./css/tideComponent.css";
import jsonData from "./ressources/tideOostende2023.json";
import "chart.js/auto";
import { Chart } from "react-chartjs-2";
import * as ChartAnnotation from "chartjs-plugin-annotation";

class Tide extends Component {
  state = {
    dayDate: new Date().toJSON().slice(5, 10),
    highTide: "",
    highTide2: "",
    lowTide: "",
    lowTide2: "",
  };

  async componentDidMount() {
    const index = jsonData.findIndex(
      (item) => item.date === this.state.dayDate
    );
    //TODO store tide in an array(using split method) & filter low to high to have a correct graph

    this.setState({
      highTide: jsonData[index].highTide,
      highTide2: jsonData[index].highTide2,
      lowTide: jsonData[index].lowTide,
      lowTide2: jsonData[index].lowTide2,
    });
  }

  timeToNumeric(tideTime) {
    const tideTimeSplitted = tideTime.split(":");
    return tideTimeSplitted[0] * 1 + tideTimeSplitted[1] / 60;
  }

  handleTideData() {
    if (
      this.timeToNumeric(this.state.highTide) <
      this.timeToNumeric(this.state.lowTide)
    )
      return [
        { x: -2, y: 0.5 },
        { x: this.timeToNumeric(this.state.highTide), y: 1.5 },
        { x: this.timeToNumeric(this.state.lowTide), y: 0.5 },
        { x: this.timeToNumeric(this.state.highTide2), y: 1.5 },
        { x: this.timeToNumeric(this.state.lowTide2), y: 0.5 },
        { x: 26, y: 1.5 },
      ];
    return [
      { x: -2, y: 1.5 },
      { x: this.timeToNumeric(this.state.lowTide), y: 0.5 },
      { x: this.timeToNumeric(this.state.highTide), y: 1.5 },
      { x: this.timeToNumeric(this.state.lowTide2), y: 0.5 },
      { x: this.timeToNumeric(this.state.highTide2), y: 1.5 },
      { x: 26, y: 0.5 },
    ];
  }

  render() {
    const data = {
      datasets: [
        {
          data: this.handleTideData(),
          fill: false,
          backgroundColor: "rgb(35, 71, 89, 0.88)",
          borderColor: " rgb(35, 71, 79, 0.88)",
          tension: 0.4,
        },
      ],
    };
    const options = {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "horizontal",
            scaleID: "x",
            value: 1,
            borderColor: "white",
            borderWidth: 2,
          },
        ],
      },
      scales: {
        x: { min: 0, max: 24, ticks: { stepSize: 1 } },
        y: { min: 0, max: 2.2, display: false },
      },
      showLine: true,
      pointStyle: false,
      plugins: {
        legend: { display: false },
      },
    };

    return (
      <div className="tideContainer">
        <Chart
          type="scatter"
          data={data}
          options={options}
          plugins={ChartAnnotation}
        />
      </div>
    );
  }
}

export default Tide;`

I tried different things but still not working. I also reviewed multiple question on SO but cannot find my solution. Chart Js is correctly working with my implementation, it is only the plugin that does not work.

Thank you in advance for your great help !!!

Answer 1

I think plugins property in react-chartjs-2 should be an array, I guess.

 <Chart
          type="scatter"
          data={data}
          options={options}
          plugins={[ChartAnnotation]}
        />

The options config for annotation plugin is not in the right node. It must be added in options.plugins node.

const options = {
  plugins: { // <-- to add, was missing
  annotation: {
    annotations: [
      {
        type: "line",
        mode: "horizontal",
        scaleID: "x",
        value: 1,
        borderColor: "white",
        borderWidth: 2,
      },
    ],
  },
}