I try to Fill gradient Color in my Line chart but there was some error restricted me from using canvas. In Code Below there are 3 function: Options contain options of the line chart, Data contain data(i have error in this function), LineChart call and return line chart
import React from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler
} from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
Filler
);
export const options = {
responsive: true,
maintainAspectRatio: true,
aspectRatio: 1,
plugins: {
legend: {
position: "top",
display: false,
},
title: {
display: true,
text: "Calories Friend Ranking",
},
},
backgroundColor: "#fff",
borderColor: "#fff",
};
export const data = (canvas) => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250, 61, 0 ,1)');
gradient.addColorStop(1, 'rgba(250, 61, 0 ,0)');
return {
labels: ["0","cuong","hien"],
datasets: [
{
backgroundColor : gradient,
borderColor : "rgba(250, 61, 0, 1)",
tension: 0.4,
fill: 'start',
data : [0,500,2000]
}
]
}
}
export default function LineChart(props) {
let { RankData } = props;
var NameLabels = ["0"]
var CaloriesDatas = [0]
for (var i = RankData.length - 1; i >= 0; i--) {
NameLabels.push(RankData[i].displayName)
CaloriesDatas.push(RankData[i].carloriesBurned)
}
//error in data function :"Property 'datasets' is missing in type '(canvas: any) =>.."
return (<Line data={data} options={options} />);
}
I have error in function Data "Here is the error that i met"