I am using react-chartjs-2 to build a line chart and none of the options that I have specified in the options prop tend to work.
Here is my code:
import React, { useState, useEffect } from "react";
// import Chart from "chart.js";
import { Line } from "react-chartjs-2";
import moment from "moment";
export default function CardLineChartRN(props) {
const [deviceMsgs, setDeviceMsgs] = useState(null);
useEffect(() => {
getMsg();
}, []);
const getMsg = async () => {
// To get Today's data
const todaysDate = moment().format("YYYY-MM-DD");
try {
const response = await fetch("http://localhost:8000/APICALL", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
// Authorization: `Bearer ${auth.token}`,
},
body: JSON.stringify({
name: props.name,
date: todaysDate,
}),
});
const res = await response.json();
if (response.ok) {
console.log("Resp recieved", res.msg);
setDeviceMsgs(res.msg);
} else {
console.log("No devices=====>", res.msg);
setDeviceMsgs(null);
}
} catch (e) {
console.log("Error fetching ", e);
}
};
return (
<div>
<Line
data={{
// labels: ['01:20', '01:30', '01:40', '01:50', '01:55', '01:58'],
labels:
deviceMsgs && deviceMsgs.length > 0
? deviceMsgs.map((deviceMsg) => deviceMsg.time)
: [""],
datasets: [
{
label: "demo",
data:
deviceMsgs && deviceMsgs.length > 0
? deviceMsgs.map(
(deviceMsg) => deviceMsg.msg[0].val
)
: [""],
backgroundColor: "rgba(255,192,203 ,0.6)",
borderColor: "red",
borderWidth: 1,
fill: true,
borderWidth: 3,
},
],
}}
height={400}
width={1500}
options={{
maintainAspectRatio: false,
repsonsive: true,
animation: {
duration: 0,
},
scales: {
xAxes: [
{
ticks: { display: false },
gridLines: {
display: false,
drawBorder: false,
},
},
],
yAxes: [
{
ticks: { display: false },
stacked: true,
ticks: {
beginAtZero: true,
},
gridLines: {
display: false,
drawBorder: false,
},
},
],
},
legend: {
display: false,
},
tooltips: {
enabled: false,
},
}}
/>
</div>
);
}
I have noticed that only the animation options work and others don't. Like I don't want to show the legend in my chart but even after setting it to false it still shows up.
Downgrade your react-chartjs-2 version to "2" if it is "3".Its worked for me.
I had the same issue; in line with the latest chart js documentation the options should be within a further plugins section - see documentation here https://www.chartjs.org/docs/latest/configuration/title.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.