score:0

for anyone using angular and ng2-charts, here is my solution. chart setup was left out for brevity.

import { component, oninit, viewchild, changedetectorref, afterviewinit } from '@angular/core';
import { basechartdirective } from 'ng2-charts';
import { genericlinechart } from './generic-line-chart';


@component({
    selector: 'app-stats-chart',
    templateurl: './stats-chart.component.html',
    styleurls: ['./stats-chart.component.scss']
})
export class statschartcomponent implements oninit, afterviewinit {
    @viewchild(basechartdirective, { static: true }) chartdirective: basechartdirective;

    constructor(private changedetectorref: changedetectorref) { }

    ngoninit() {
        // ...setup chart
    }

    ngafterviewinit() {
        // set gradient
        const gradient = this.chartdirective.chart.ctx.createlineargradient(0, 0, 0, 400);
        gradient.addcolorstop(0, 'rgba(30, 214, 254, .3)');
        gradient.addcolorstop(1, 'rgba(0,0,0,0)');
        this.chart.linechartdata[0].backgroundcolor = gradient;

        this.changedetectorref.detectchanges();
    }

}

score:0

you could use this npm package.

https://www.npmjs.com/package/chartjs-plugin-gradient

this makes it very easy to create a gradient backgroundcolor or bordercolor.

example:

const chart = new chart(ctx, {
  data: {
    datasets: [{
      // data
      gradient: {
        backgroundcolor: {
          axis: 'y',
          colors: {
            0: 'red',
            50: 'yellow',
            100: 'green'
          }
        },
        bordercolor: {
          axis: 'x',
          colors: {
            0: 'black',
            1: 'white',
            2: 'black',
            3: 'white'
          }
        }
      }
    }]
  }
});

score:13

for using in react i did the following way you need to pass an id to your component and then fetch the element using that id

import react, { component } from 'react'
import { line } from 'react-chartjs-2'

export default class graphcomponent extends component{
  constructor(props){
    super(props)
    this.state = {
      chartdata: {}
    }
  }

  componentdidmount(){
    //your code
    var ctx = document.getelementbyid('canvas').getcontext("2d")
    var gradient = ctx.createlineargradient(0, 0, 0, 400)
    gradient.addcolorstop(0, 'rgba(229, 239, 255, 1)')
    gradient.addcolorstop(1, '#ffffff')
    const newdata = {
      labels: [1, 1],
      datasets: [
        {
          label: 'usd',
          data: [1,1],
          backgroundcolor: gradient,
          bordercolor: this.props.border_color,
          pointradius: 0
        }
      ]

    }
    this.setstate({chartdata: newdata})
  }

  //more of your code

  render(){
    return(
          <line
            id='canvas'//you need to give any id you want
            data={this.state.chartdata}
            width={100}
            height={30}
            options={{
              legend: {
                display: false
              }
            }}
          />

    )
  }
}

this is only my second answer so please forgive me if i have made any mistakes in writing

score:30

note: for those people who is using newer version (v2.7.0) of chart.js, find out that is not working while you're copy-paste @bviale's answer back to your code base; some property names has changed:

fillcolor -> backgroundcolor
strokecolor -> bordercolor
pointcolor -> pointbackgroundcolor
pointstrokecolor -> pointbordercolor

you will need to update those property names to make it work.

reference: https://github.com/chartjs/chart.js/blob/master/docs/charts/line.md#dataset-properties

score:61

the link you provided was pretty clear, you have to put in the field fillcolor in datasets a lineargradient object instead of a plain color. you can do complex gradients, but here is the code of a simple one (changing the opacity of the same orange) :

var gradient = ctx.createlineargradient(0, 0, 0, 400);
gradient.addcolorstop(0, 'rgba(250,174,50,1)');   
gradient.addcolorstop(1, 'rgba(250,174,50,0)');

and your complete datasets :

datasets: [
            {
                fillcolor : gradient, // put the gradient here as a fill color
                strokecolor : "#ff6c23",
                pointcolor : "#fff",
                pointstrokecolor : "#ff6c23",
                pointhighlightfill: "#fff",
                pointhighlightstroke: "#ff6c23",
                data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
            }
        ]

see it in action in this jsfiddle


Related Query

More Query from same tag