OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Error message in console while using Chart.js with NextJS: Canvas is already in use

  • Thread starter Thread starter Efrem
  • Start date Start date
E

Efrem

Guest
I am trying to display some basic data within chartjs and nextjs. below there is the main code and some key notes to consider

Main code having the problem

Code:
import Chart from "chart.js/auto";
import { RefObject, Dispatch, SetStateAction } from "react";
import { PriceApi } from "../endpoints/price";
import { FundingApi } from "../endpoints/market/Funding";

declare global {
  interface HTMLCanvasElement {
    chartInstance?: Chart;
  }
}

export const makeChart = async (
  ref: RefObject<HTMLCanvasElement>,
  setRef: Dispatch<SetStateAction<RefObject<HTMLCanvasElement>>>,
  asset: string,
  timeframe: string,
  days: string
) => {
  try {
    const [priceDataset, fundingDataset] = await Promise.all([
      PriceApi(asset, timeframe, days),
      FundingApi(asset, timeframe, days),
    ]);

    const deploy = new Chart(ref.current, {
      data: {
        datasets: [priceDataset, fundingDataset],
      },
      options: {
        scales: {
          y: {
            type: "linear",
          },
          "y-log": {
            type: "logarithmic",
            position: "left",
          },
        },
      },
    });
  } catch (error) {
    console.error("Error creating chart:", error);
  }
};

Key notes

the useRef is actually a useState from react

Code:
  const chartRef: RefObject<HTMLCanvasElement> =
    useRef<HTMLCanvasElement>(null);

  const [ref, setRef] = useState(chartRef);

the dataset returned within the funding and price api are an array for the chartjs new Chart componenet

Code:
    const [priceDataset, fundingDataset] = await Promise.all([
      PriceApi(asset, timeframe, days),
      FundingApi(asset, timeframe, days),
    ]);

will return something like this =>

  const dataset = {
    type: "line",
    label: "Price",
    data: data,
    borderWidth: 1,
    fill: false,
    yAxisID: "y-linear",
    pointRadius: 0,
    backgroundColor: "white",
    borderColor: "white",
  };

  return dataset;

I am trying to create a const deploy = new Chart(ref, ...) for then update it with useState: setRef(deploy)

also the chart seem to be loading but is strange. below I attach both error and image charts

Code:
[Error] Error creating chart: – Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
    (anonymous function) (app-index.js:33)
    (anonymous function) (hydration-error-info.js:63)
    (anonymous function) (chart.ts:46)

I actually tried with chatgpt but for some reason it just don't work. it say to use .delete() and .destroy on the chart itself but I still get that error. I also had a look here with some guys having my similar problem but don't seem to be working. I am using typescript

<p>I am trying to display some basic data within chartjs and nextjs. below there is the main code and some key notes to consider</p>
<p><strong>Main code having the problem</strong></p>
<pre><code>import Chart from "chart.js/auto";
import { RefObject, Dispatch, SetStateAction } from "react";
import { PriceApi } from "../endpoints/price";
import { FundingApi } from "../endpoints/market/Funding";

declare global {
interface HTMLCanvasElement {
chartInstance?: Chart;
}
}

export const makeChart = async (
ref: RefObject<HTMLCanvasElement>,
setRef: Dispatch<SetStateAction<RefObject<HTMLCanvasElement>>>,
asset: string,
timeframe: string,
days: string
) => {
try {
const [priceDataset, fundingDataset] = await Promise.all([
PriceApi(asset, timeframe, days),
FundingApi(asset, timeframe, days),
]);

const deploy = new Chart(ref.current, {
data: {
datasets: [priceDataset, fundingDataset],
},
options: {
scales: {
y: {
type: "linear",
},
"y-log": {
type: "logarithmic",
position: "left",
},
},
},
});
} catch (error) {
console.error("Error creating chart:", error);
}
};
</code></pre>
<p><strong>Key notes</strong></p>
<p>the useRef is actually a useState from react</p>
<pre><code> const chartRef: RefObject<HTMLCanvasElement> =
useRef<HTMLCanvasElement>(null);

const [ref, setRef] = useState(chartRef);
</code></pre>
<p>the dataset returned within the funding and price api are an array for the chartjs new Chart componenet</p>
<pre><code> const [priceDataset, fundingDataset] = await Promise.all([
PriceApi(asset, timeframe, days),
FundingApi(asset, timeframe, days),
]);

will return something like this =>

const dataset = {
type: "line",
label: "Price",
data: data,
borderWidth: 1,
fill: false,
yAxisID: "y-linear",
pointRadius: 0,
backgroundColor: "white",
borderColor: "white",
};

return dataset;
</code></pre>
<p>I am trying to create a const deploy = new Chart(ref, ...) for then update it with useState: setRef(deploy)</p>
<p>also the chart seem to be loading but is strange. below I attach both error and image <a href="https://i.sstatic.net/YeHPr2x7.png" rel="nofollow noreferrer">charts</a></p>
<pre><code>[Error] Error creating chart: – Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
(anonymous function) (app-index.js:33)
(anonymous function) (hydration-error-info.js:63)
(anonymous function) (chart.ts:46)
</code></pre>
<p>I actually tried with chatgpt but for some reason it just don't work. it say to use .delete() and .destroy on the chart itself but I still get that error. I also had a look here with some guys having my similar problem but don't seem to be working. I am using typescript</p>
 
Top