Error in fill Gradient Color in Line Chart.js

Viewed 37

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"

0 Answers
Related