chart not working in Next 13.4.7
Unanswered
Sammy Kunimatsu posted this in #help-forum
I'm trying to use the chart on my page using Next in version 13.4.7, but it's giving me this error. My page code:
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
export const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
};
const Dashboard: any = (props: any) => {
ChartJS.register(ArcElement, Tooltip, Legend);
return (
<div>
<Doughnut data={data} />
</div>
)
}1 Reply
@Sammy Kunimatsu I'm trying to use the chart on my page using Next in version 13.4.7, but it's giving me this error. My page code:
tsx
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
export const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
};
const Dashboard: any = (props: any) => {
ChartJS.register(ArcElement, Tooltip, Legend);
return (
<div>
<Doughnut data={data} />
</div>
)
}
hmm i tried your code and it seems to work fine?
https://github.com/joulev/debug/blob/nextjs-with-chartjs-1124813660964003922/app/page.tsx
https://debug-git-nextjs-with-chartjs-1124813660964003922-joulev.vercel.app/
https://github.com/joulev/debug/blob/nextjs-with-chartjs-1124813660964003922/app/page.tsx
https://debug-git-nextjs-with-chartjs-1124813660964003922-joulev.vercel.app/