Gradient colour in backgroundColor JS

by

1👍

✅

There is a snippet using Chart.js 2.7.1:

var bar_ctx = document.getElementById('bandwidthChart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 0, 600);
purple_orange_gradient.addColorStop(0, 'orange');
purple_orange_gradient.addColorStop(1, 'purple');

bandwidthChart = new Chart(, {
                    type: "bar",
                    data: {
                        labels: response.extra.labels,
                        datasets: [{
                            label: "{% trans "Bandwidth" %}",
                            backgroundColor: purple_orange_gradient,
                            data: response.extra.data
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: response.extra.postUnits,
                                }
                            }]
                        },
                        legend: {
                            display: false
                        },
                        maintainAspectRatio: false,
                    }

Demo : https://codepen.io/jonathandion/pen/aEpVba

👍:4

you can try it as:

background: linear-gradient(to bottom, red , yellow);

This would tell the system to change from red to yellow as it moves to the bottom.

Leave a comment