The annotation message does not appear. with Chart.js , react-chart-js , and chartjs-plugin-annotation

Question

Show code

import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

import annotationPlugin from "chartjs-plugin-annotation";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  annotationPlugin
);

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: "top",
    },
    title: {
      display: true,
      text: "Chart.js Line Chart",
    },
    annotation: {
      annotations: {
        line1: {
          adjustScaleRange: true,
          drawTime: "afterDatasetsDraw",
          type: "line",

          scaleID: "x",
          value: 1,
          borderColor: "rgba(104,1)",

          label: {
            enabled: true,
            content: "Hi !!",
            backgroundColor: "rgba(255, 26, 104, 0.8)",
            color: "black",
          },
        },
      },
    },
  },
};

const labels = [1, 2, 3, 4];

export const data = {
  labels,
  datasets: [
    {
      label: "My First Dataset",
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: "rgb(75, 192, 192)",
      tension: 0.1,
    },
  ],
};

export function ChartPrueba() {
  return (
    <div>
      <h1>Example react-chartjs-2 Chart with the annotation plugin</h1>
      <Line options={options} data={data} />;
    </div>
  );
}

I tried disabling tailwindcss and importing it directly into the app, I use Vite and these are the dependencies

 "dependencies": {
    "chart.js": "^4.2.1",
    "chartjs-plugin-annotation": "^2.2.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0"
  },

Stack asks me to put more words I don't know why. Everything is already there so I add random words. Stack asks me to put more words I don't know why. Everything is already there so I add random words. Stack asks me to put more words I don't know why. Everything is already there so I add random words. Stack asks me to put more words I don't know why. Everything is already there so I add random words. Stack asks me to put more words I don't know why. Everything is already there so I add random words. Stack asks me to put more words I don't know why. Everything is already there so I add random words.

}

score 1 · Answer 1 · answered Apr 14 '23 at 08:53

To show the label of line annotation, you need to set display: true and not enabled options.

Therefore your label config should be:

      label: {
        display: true, // <-- NOT enabled
        content: "Hi !!",
        backgroundColor: "rgba(255, 26, 104, 0.8)",
        color: "black",
      },

The annotation message does not appear. with Chart.js , react-chart-js , and chartjs-plugin-annotation

1 Answers1