Chart.js - add gradient instead of solid color - implementing solution

Question

I use Chart.js and everything is fine, but I want to replace the current colored background (fillColor: "rgba (250,174,50,0.5)") with a gradient. I have a solution to replace the gradient, but for me it is too difficult to implement with my poor knowledge of JS. I think it's pretty easy for those who know JS.

So my Chart.js code is:

<script> var data = { labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"], datasets: [ { fillColor : "rgba(250,174,50,0.5)", 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] } ] }; var options = { responsive: true, datasetStrokeWidth : 3, pointDotStrokeWidth : 4, tooltipFillColor: "rgba(0,0,0,0.8)", tooltipFontStyle: "bold", tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>", scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>" }; var ctx = document.getElementById("temp-chart").getContext("2d"); var myLineChart = new Chart(ctx).Line(data, options); </script> 

And here is the solution with the gradient . Can someone try to implement this gradient background instead of my current solid background? Thanks for the help.

I tried to implement it, but then other functions do not work (e.g. scaleLabels, etc.).

Answer 1

The relationships you provided were pretty clear, you should place a fillColor object in the fillColor field of the datasets instead of the regular color. You can perform complex gradients, but the code is simple (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 in action in JSFiddle

Answer 2

Note. For those who use the newer version (v2.7.0) of Chart.js, find out that it does not work while you copy-paste @bviale and respond back to the code base; Some property names have been changed:

 fillColor -> backgroundColor strokeColor -> borderColor pointColor -> pointBackgroundColor pointStrokeColor -> pointBorderColor 

You need to update the names of these properties to make them work.

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

Answer 3

For use in the reaction, I did as follows, you need to pass the identifier to your component, and then extract the element using this identifier

 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 made any mistakes in writing

Answer 4

NOTE. Copied from CODEPEN

This solution creates a beautiful vertical gradient gradient with a red theme.

  // ============================================ // As of Chart.js v2.5.0 // http://www.chartjs.org/docs // ============================================ var chart = document.getElementById('chart').getContext('2d'), gradient = chart.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)'); gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)'); gradient.addColorStop(1, 'rgba(255, 0, 0, 0)'); var data = { labels: [ 'January', 'February', 'March', 'April', 'May', 'June' ], datasets: [{ label: 'Custom Label Name', backgroundColor: gradient, pointBackgroundColor: 'white', borderWidth: 1, borderColor: '#911215', data: [50, 55, 80, 81, 54, 50] }] }; var options = { responsive: true, maintainAspectRatio: true, animation: { easing: 'easeInOutQuad', duration: 520 }, scales: { xAxes: [{ gridLines: { color: 'rgba(200, 200, 200, 0.05)', lineWidth: 1 } }], yAxes: [{ gridLines: { color: 'rgba(200, 200, 200, 0.08)', lineWidth: 1 } }] }, elements: { line: { tension: 0.4 } }, legend: { display: false }, point: { backgroundColor: 'white' }, tooltips: { titleFontFamily: 'Open Sans', backgroundColor: 'rgba(0,0,0,0.3)', titleFontColor: 'red', caretSize: 5, cornerRadius: 2, xPadding: 10, yPadding: 10 } }; var chartInstance = new Chart(chart, { type: 'line', data: data, options: options }); 

check out this pen https://codepen.io/grayghostvisuals/pen/gpROOz