Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: A undifined canvas error occuring in react-native #1198

Open
1 task done
FelipeModena opened this issue Oct 12, 2023 · 2 comments
Open
1 task done

[Bug]: A undifined canvas error occuring in react-native #1198

FelipeModena opened this issue Oct 12, 2023 · 2 comments
Labels

Comments

@FelipeModena
Copy link

Would you like to work on a fix?

  • Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

image

I am facing this error, and i couldnt find a any way to solve it. Anyone have ever faced it? I see that in the frequent questions, there is "how to access canvas component", but still not useful.

I am using the simple code exaple that they give as exemple here

`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 { Faker, de, de_CH, en_US } from "@faker-js/faker";

export const faker = new Faker({
locale: [de_CH, de],
});
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);

export const options = {
responsive: true,
plugins: {
legend: {
position: "top" as const,
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
};

const labels = ["January", "February", "March", "April", "May", "June", "July"];

export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
{
label: "Dataset 2",
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
},
],
};

export function ContractChart2() {
return ;
}`

Reproduction

https://react-chartjs-2.js.org/examples/line-chart

chart.js version

^4.4.0

react-chartjs-2 version

5.2.0

Possible solution

No response

@jiayeli-hualien
Copy link

jiayeli-hualien commented Jan 17, 2024

I got the same issue when I use in my React Native project created by expo.

package versions
"chart.js": "^4.4.1",
"expo": "~49.0.15",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-chartjs-2": "^5.2.0",
"react-native": "0.72.6"

error
Invariant Violation: View config getter callback for component canvas must be a function (received undefined). Make sure to start component names with a capital letter.

This error is located at:
in canvas
in ChartComponent
in Unknown (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

screenshot_expo

@awd0786
Copy link

awd0786 commented Jul 7, 2024

What is the solution for this??

my code is

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';
import CustomText from './CustomText';
import { API_URL } from '@env';

const Graph: React.FC = () => {
const [graphData, setGraphData] = useState<{ xData: number[], yData: number[] }>({ xData: [], yData: [] });

useEffect(() => {
fetchData();
}, []);

const fetchData = async () => {
try {
const xResponse = await axios.get<number[]>(${API_URL}/api/Donor/GetXAxis);
const yResponse = await axios.get<number[]>(${API_URL}/api/Donor/GetYAxis);

  setGraphData({ xData: xResponse.data, yData: yResponse.data });
} catch (error) {
  console.error('Error fetching data:', error);
}

};

const chartData = {
labels: graphData.xData.map((_, index) => ${index}),
datasets: [
{
label: 'Graph Data',
data: graphData.yData,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
},
],
};

return (
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
Graph


);
};

export default Graph;

still i am getting error Render Error
ERROR Invariant Violation: View config getter callback for component canvas must be a function (received undefined). Make sure to start component names with a capital letter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants