JSFiddle - React, Tailwind, and code Playground

Example chart.js for single bar chart with gradient colored bar.

by Oliver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext('2d');
var gradient = ctx.createLinearGradient(0,0,0, 150);
gradient.addColorStop(0,"cornflowerBlue");
gradient.addColorStop(1,"white");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["% Water"],
        datasets: [{
            label: '% Water',
            data: [30],
            backgroundColor: [
                gradient
            ],
            borderWidth: 1
        }]
    },
    options: {
    	maintainAspectRatio: false,
        title: {
        	display: true,
            text: "% Water"
        },
        legend: {
        	display: false
        },
        tooltips: {
        	enabled: false
        },
        scales: {
            yAxes: [{
            	position: "right",
                gridLines: {
                	display: true,
                    tickMarkLength: 5
                },
                ticks: {
                    beginAtZero:true,
                    mirror: false,
                    padding: 5,
                    min: 0,
                    max: 30,
                    stepSize: 10
                }
            }],
            xAxes: [{
            	display: false,
                categoryPercentage: 1.0
            }]
        }
    }
});