Chart.js - Add Gradient Instead Of Solid Color - Implementing Solution

I am using Chart.js and everything is ok, but I want to replace current color background (fillColor : 'rgba(250,174,50,0.5)') with a gradient. I have solution for replacing gradie

Solution 1:

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

Solution 2:

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

Solution 3:

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

Solution 4:

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();
    }

}