JSFiddle - React, Tailwind, and code Playground

by Robert Tome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="myChart" width="600" height="500"></canvas>

JavaScript

var ChartTitleOps = {
    canvasBackgroundColor: 'rgba(255,255,255,1.00)',
    animationSteps: 60,
    spaceLeft: 12,
    spaceRight: 12,
    spaceTop: 12,
    barValueSpacing: 2,
    scaleLineWidth: 10,
    scaleFontFamily: "'Bree Serif', sans-serif",
    responsive: false,
    animation: false,
    maintainAspectRatio: false,
    scaleIntegersOnly: true,
    scaleShowGridLines: false,
    scaleBeginAtZero: true,
    scaleFontSize: 17,
    scaleFontColor: "#FFFFFF",
    scaleOverride: true,
    showTooltips: true,
    tooltipFillColor: "#e64c65",
    tooltipFontFamily: "sans-serif",
    tooltipFontColor: "#fff",
    tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> units)",
    scaleSteps: 0.5,
    scaleStepWidth: 1,
    scaleStartValue: 0,
    scaleGridLineColor: "#1f253d"
};

var ChartTitleData = {
    labels: ["a", "b", "c", "d", "e", "f", "g", "h"],
    datasets: [{
        fillColor: "rgba(52,152,219,1)",
        strokeColor: "rgba(52,152,219,0.5)",
        pointColor: "rgba(52,152,219,1)",
        markerShape: "circle",
        pointStrokeColor: "rgba(255,255,255,1.00)",
        data: [0, 0, 0.2, 0.3, 0, 0, 0, 0]
    }]


};

var wpChartChartTitleBar = new Chart(document.getElementById("myChart").getContext("2d")).Bar(ChartTitleData, ChartTitleOps);

for (var key in wpChartChartTitleBar.datasets[0].bars){
    if (wpChartChartTitleBar.datasets[0].bars[key].value == 0 ) {
    // Change 2nd bar to red (display).
  wpChartChartTitleBar.datasets[0].bars[key].fillColor = "rgba(229,12,12,0.7)";
  wpChartChartTitleBar.datasets[0].bars[key].strokeColor = "rgba(229,12,12,1)";
  // Change 2nd bar to red (highlight setting on mouse over)
wpChartChartTitleBar.datasets[0].bars[key].highlightFill = "rgba(0,229,0,0.7)";
wpChartChartTitleBar.datasets[0].bars[key].highlightStroke = "rgba(0,229,0,1)";

    }
}

wpChartChartTitleBar.update();