0👍
I changed how I manage both state and useEffect and now the drawing have no issue. As the documentation says, if multiple states change together combine them in a single object and that is what I did.
What I change:
As mentioned, I change the state into one object:
const [data, setData] = useState({
chartData: {
labels: [],
datasets: [
{
label: "Users Gained",
data: [],
backgroundColor: ["red"],
borderColor: "red",
},
],
},
slideData: {
slideTitle: "",
htmlText: "",
paragraphTitle: "",
},
});
And I change the useEffect to only run the first time that the component mounts:
useEffect(function () {
fetch(`this is a call to my api`)
.then(function (response) {
return response.json();
})
.then(function (data) {
setData({
chartData: {
labels: data.data[props.slideData.xAxis],
datasets: [
{
label: "Users Gained",
data: data.data[props.slideData.yAxis],
backgroundColor: ["red"],
borderColor: "red",
},
],
},
slideData: {
slideTitle: data.data.slide_title,
htmlText: data.data.html_text,
paragraphTitle: data.data.paragraph_title,
},
});
setLoading(false);
});
}, []);
- Chartjs-Chart.js scatter/bubble pointstyle custom text
- Chartjs-Chartjs Horizontal Bar, the width of the Bars does not change
Source:stackexchange.com