Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

282
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda