[Bug]: adding a gradient line using Typescript throws an error

🦄

• Would you like to work on a fix?

Current and expected behavior

the library cannot compile when i try to use canvas.getProperty using Typescript, while trying to create a gradient line in a react-chart.js Line component

Typescripts throws this error :

 TS2741: Property 'datasets' is missing in type '(canvas: { getContext: (arg0: string) => any; }) => { labels: string[]; datasets: { label: string; data: number[]; tension: number; pointStyle: string; pointRadius: number; pointBorderWidth: number; pointBorderColor: string; borderWidth: number; backgroundColor: string; fill: boolean; borderColor: any; }[]; }' but required in type 'ChartData<"line", (number | ScatterDataPoint | null)[], unknown>'.
    115 |   return (
    116 |     <div className="graph">  
  > 117 |      <Line options={options} data={data} />
        |                                   ^^^^^^
    118 |      <Actions />
    119 |     </div>
    120 |   )

I am expecting to see my chart showing a gradient line

the error is brought up when i try to use canvas.getContext to create a gradient and add it to the borderColor property of my datasets:

  const data = (canvas: { getContext: (arg0: string) => any; }) => {
    const ctx = canvas.getContext("2d");
    const gradient = ctx.createLinearGradient(0, 0, 0, 200);
    gradient.addColorStop(0, 'rgba(250,174,50,1)');   
    gradient.addColorStop(1, 'rgba(250,174,50,0)');

    const result = {
      labels: hours,
      datasets: [
        {
          label: 'currency value in $',
          data : priceLabel,
          tension:0.5,
          pointStyle: 'circle',
          pointRadius:1,
          pointBorderWidth:0,
          pointBorderColor:'black',
          borderWidth:2,
          backgroundColor: 'black',
          fill:true,
          borderColor: gradient,
          
        },
      ]
    }
    return result
  }

return (
    <div className="graph">  
     <Line options={options} data={data} />
     <Actions />
    </div>
  )

Reproduction

https://github.com/regola-Tacens/BinanceChart/tree/bug/gradient-line

chart.js version

3.0.0

react-chartjs-2 version

4.0.0

Possible solution

No response

[dangreen]

@regola-Tacens Hi. data prop must be an object. How to add a gradient to the chart you can see in this example.

[OlekRia]

@dangreen in Chart.js component you wrapped there is a property fill. Due the documentation in Chart.js I put this fill property value as ‘start’.

In result I have no effect.