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="barChart" width="600" height="400"></canvas>

JavaScript

// Chartjs sample bar chart with some columns shown differently 
var ChartOptions = {
    canvasBackgroundColor: 'rgba(255,255,255,1.00)',
    barValueSpacing: 10,
    scaleLineWidth: 1,
    scaleFontFamily: "sans-serif",
    responsive: false,
    animation: false,
    maintainAspectRatio: false,
    scaleIntegersOnly: true,
    scaleShowGridLines: false,
    scaleBeginAtZero: true,
    scaejsFontSize: 14,
    scaleFontColor: "#AAAAAA",
    scaleOverride: true,
    showTooltips: true,
    tooltipFillColor: "#333333",
    tooltipFontFamily: "sans-serif",
    tooltipFontColor: "#fff",
    tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> points)",
    scaleSteps: 10,
    scaleStepWidth: 1,
    scaleStartValue: 0,
    scaleGridLineColor: "#1f253d"
};

var ChartData = {
    labels: ["Jake", "Anne", "Joe", "Fred", "Adam", "Suzanne", "Rob"],
    datasets: [{
        fillColor: "rgba(52,152,219,1)",
        strokeColor: "rgba(52,152,219,0.5)",
        pointColor: "rgba(52,152,219,1)",
        pointStrokeColor: "rgba(255,255,255,1.00)",
        data: [8, 6, 5, 3, 1, 9, 5]
    }]
};

var myBarChart = new Chart(document.getElementById("barChart").getContext("2d")).Bar(ChartData, ChartOptions);

// Change 1st bar (index 0) to red (display).
myBarChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,0.7)";
myBarChart.datasets[0].bars[0].strokeColor = "rgba(255,0,0,1)";
// Change 1st bar to red (highlight setting on mouse over)
myBarChart.datasets[0].bars[0].highlightFill = "rgba(212,10,10,0.7)";
myBarChart.datasets[0].bars[0].highlightStroke = "rgba(212,10,10,1)";

// Change 6th bar (index 5) to green (display).
myBarChart.datasets[0].bars[5].fillColor = "rgba(22,255,22,0.7)";
myBarChart.datasets[0].bars[5].strokeColor = "rgba(22,255,22,1)";
// Change 6th bar to green (highlight setting on mouse over)
myBarChart.datasets[0].bars[5].highlightFill = "rgba(21,210,30,0.7)";
myBarChart.datasets[0].bars[5].highlightStroke = "rgba(21,210,30,1)";

myBarChart.update();