Is there a way to use this library with React?

[brianwoo]

I am trying to use this library to integrate error bars with a scatterplot graph in React (currently using react-chartjs-2). Could you please provide instructions on how I can achieve that? Thanks!

[sgratzl]

this is just a plugin for chart.js. So, you should be able to use it using react-chartjs-2 just be sure to register everything in chart.js before using this plugin

[brianwoo]

I have tried using the code below to create a scatterWithErrorBars but I have not been able to do that:

import React, { createRef, useEffect } from "react";
import "./App.css";
import { Chart, registerables } from "chart.js";
import {
  PointWithErrorBar,
  ScatterWithErrorBarsController,
} from "chartjs-chart-error-bars";

Chart.register(
  ScatterWithErrorBarsController,
  PointWithErrorBar,
  ...registerables
);

function ErrorBars() {
  const canvasRef = createRef<HTMLCanvasElement>();

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas != null) {
      const ctx = canvas.getContext("2d");
      if (ctx != null) {
        // eslint-disable-next-line no-new
        new Chart(ctx, {
          type: "scatterWithErrorBars",
          data: {
            labels: ["A", "B"],
            datasets: [
              {
                data: [
                  {
                    x: 2,
                    xMin: 1,
                    xMax: 3,
                    y: 4,
                    yMin: 1,
                    yMax: 6,
                  },
                  {
                    x: 7,
                    xMin: 6,
                    xMax: 9,
                    y: 2,
                    yMin: 1,
                    yMax: 4,
                  },
                ],
              },
            ],
          },
        });
      }
    }
  });

  return (
    <div>
      <canvas ref={canvasRef} id="myChart" />
    </div>
  );
  // return <div>Hi</div>;
}

export default ErrorBars;

[brianwoo]

The error that I got was: chart.esm.js:605 Uncaught TypeError: Cannot read properties of undefined (reading 'ctx')

[brianwoo]

To prove that the basic Chart.js library works in React, I have the following code:

import React, { createRef, useEffect } from "react";
import "./App.css";
import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

function ChartJsLine() {
  const canvasRef = createRef<HTMLCanvasElement>();

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas != null) {
      const ctx = canvas.getContext("2d");
      if (ctx != null) {
        // eslint-disable-next-line no-new
        new Chart(ctx, {
          type: "line",
          data: {
            //Bring in data
            labels: ["Jan", "Feb", "March"],
            datasets: [
              {
                label: "Sales",
                data: [86, 67, 91],
              },
            ],
          },
          options: {
            //Customize chart options
          },
        });
      }
    }
  });

  return (
    <div>
      <canvas ref={canvasRef} id="myChart" />
    </div>
  );
}

export default ChartJsLine;

This is working fine in React.

[brianwoo]

No problem. I created a codesandbox (https://codesandbox.io/s/nifty-lehmann-bz4yxe). The Installing dependencies takes a LONG time for some reason.
You can also checkout my github repo: https://github.com/brianwoo/chartjs-errorbars

[sgratzl]

strange this minimal example: https://codesandbox.io/s/runtime-waterfall-zhep8n?file=/src/App.tsx works right away. I was copying your ChartErrorBars.tsx into a new codesandbox react template

[brianwoo]

That is interesting. It seems to work in codesandbox; however, I forked the codesandbox and ran that on my local machine, it doesn't seem to work. I am still getting an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'ctx')
    at new DatasetController (:3000/static/js/vendors~main.chunk.js:2419:23)
    at LineController._createSuperInternal (:3000/static/js/vendors~main.chunk.js:402:24)
    at new LineController (:3000/static/js/vendors~main.chunk.js:4411:20)
    at ScatterWithErrorBarsController.addElements (:3000/static/js/vendors~main.chunk.js:2550:24)
    at ScatterWithErrorBarsController.initialize (:3000/static/js/vendors~main.chunk.js:2444:12)
    at ScatterWithErrorBarsController.initialize (:3000/static/js/vendors~main.chunk.js:4419:353)
    at new DatasetController (:3000/static/js/vendors~main.chunk.js:2434:10)
    at ScatterWithErrorBarsController._createSuperInternal (:3000/static/js/vendors~main.chunk.js:402:24)
    at new LineController (:3000/static/js/vendors~main.chunk.js:4411:20)
    at ScatterWithErrorBarsController._createSuperInternal (:3000/static/js/vendors~main.chunk.js:402:24)
    at new ScatterController (:3000/static/js/vendors~main.chunk.js:4940:20)
    at ScatterWithErrorBarsController._createSuperInternal (:3000/static/js/vendors~main.chunk.js:143:24)
    at new ScatterWithErrorBarsController (:3000/static/js/vendors~main.chunk.js:21378:22)
    at Chart.buildOrUpdateControllers (:3000/static/js/vendors~main.chunk.js:9388:29)
    at Chart.update (:3000/static/js/vendors~main.chunk.js:9436:33)
    at new Chart (:3000/static/js/vendors~main.chunk.js:9127:12)
    at :3000/main.03e71a7fadd093afbc15.hot-update.js:46:9
    at invokePassiveEffectCreate (:3000/static/js/vendors~main.chunk.js:46790:24)
    at HTMLUnknownElement.callCallback (:3000/static/js/vendors~main.chunk.js:27404:18)
    at Object.invokeGuardedCallbackDev (:3000/static/js/vendors~main.chunk.js:27453:20)
    at invokeGuardedCallback (:3000/static/js/vendors~main.chunk.js:27513:35)
    at flushPassiveEffectsImpl (:3000/static/js/vendors~main.chunk.js:46872:13)
    at unstable_runWithPriority (:3000/static/js/vendors~main.chunk.js:56675:16)
    at runWithPriority$1 (:3000/static/js/vendors~main.chunk.js:34810:14)
    at flushPassiveEffects (:3000/static/js/vendors~main.chunk.js:46749:18)
    at :3000/static/js/vendors~main.chunk.js:46630:15
    at workLoop (:3000/static/js/vendors~main.chunk.js:56625:38)
    at flushWork (:3000/static/js/vendors~main.chunk.js:56599:18)
    at MessagePort.performWorkUntilDeadline (:3000/static/js/vendors~main.chunk.js:56364:31)

Would you mind trying that on your local machine to see if you can find the issue? Thanks very much.

[sgratzl]

I think I found the bug, please give v3.7.1 a try

[brianwoo]

Thanks very much @sgratzl . The new version seems to have fixed the issue!