Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

281
Views
Error in fill Gradient Color in Line Chart.js

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"

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!