Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

291
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda