Annotation plugin gets disabled on adding streaming plugin ( react )

Expected behavior

Both the plugins should work seamlessly

Current behavior

I have 2 plugins in my chart.js project

• The annotation plugin
• The streaming plugin

The annotation plugin works fine until I register the Streaming plugin together.

Now only the streaming plugin works.

Reproducible sample

https://stackblitz.com/edit/chartjs-reproduced-error?file=components/LineChart.js

Optional extra steps/info to reproduce

Code snippet -

import { Line } from "react-chartjs-2";

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

import "chartjs-adapter-luxon";
import ChartStreaming from "chartjs-plugin-streaming";

Registering the plugins

  Chart.register(annotationPlugin);
  Chart.register(ChartStreaming);

// some stuff here

return <Line data={data} plugins={annotationPlugin} options={options} />

Versions of the packages -

        "chart.js": "^3.7.0",
        "chartjs-adapter-luxon": "^1.1.0",
        "chartjs-plugin-annotation": "^1.3.1",
        "chartjs-plugin-streaming": "^2.0.0",
        "next": "12.0.10",
        "react": "17.0.2",
        "react-chartjs-2": "^4.0.1",

Annotation Config -

   plugins: {
            autocolors: false,
            annotation: {
              annotations: {
                line1: {
                  drawTime: "afterDatasetsDraw",
                  yScaleID: "yAxes",
                  type: "line",
                  yMin: 43170,
                  yMax: 43170,
                  borderColor: function (context) {
                    const chart = context.chart;
                    const { ctx, chartArea } = chart;

                    if (!chartArea) {
                      // This case happens on initial chart load
                      return;
                    }
                    return getGradient(ctx, chartArea, 30000);
                  },
                  borderWidth: 2,
                },
              },
            }

Streaming config -

 xAxes: {
              beginAtZero: false,
              ticks: {
                color: "#45EED0",
                maxTicksLimit: 10,
              },
              grid: {
                display: false,
                borderColor: "#2B2D65",
              },
              type: "realtime",
              realtime: {
                duration: 20000,
                refresh: 1000,
                delay: 2000,
                onRefresh: onRefresh,
              },
            }

Possible solution

No response

Context

No response

chart.js version

“chart.js”: “^3.7.0”,

Browser name and version

Chrome 98.0.4758.82

Link to your project

No response

[LeeLenaleee]

Error seemed to be that you renamed your X axis ID and the annotation plugin expected x as an ID while you named it xAxes: https://stackblitz.com/edit/chartjs-reproduced-error-5ayyah?file=components%2FLineChart.js

[GeoBrodas]

Thankyou very much @LeeLenaleee , sorry for the trouble. But God bless you! It’s working!