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

Question

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 gradient but it's too dificult for me to implement this with my poor JS knowledge. I guess pretty easy for someone who know JS.

So my Chart.js code:

        <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 solution with gradient. Can someone try implement this gradient background instead of my current solid background? Thanks for help.

I tryed implement it, but then other functions don't work (like scaleLabels etc.).

Answer 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