JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="500" height="500"></canvas>
JavaScript
var ChartTitleOps = {
showTooltips: true,
tooltipFillColor: "#e64c65",
tooltipFontFamily: "'Bree Serif', sans-serif",
tooltipFontColor: "#fff",
tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> votes)",
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,
scaleSteps: 12,
scaleStepWidth: 1,
scaleStartValue: 0,
scaleGridLineColor: "#1f253d"
};
var ChartTitleData = {
labels: ["a", "b", "c", "d"],
datasets: [{
fillColor: "rgba(52,104,175,0.7)",
strokeColor: "rgba(52,104,175,1)",
data: [3, 4, 9, 7]
}]
};
var wpChartChartTitleBar = new Chart(document.getElementById("myChart").getContext("2d")).Bar(ChartTitleData, ChartTitleOps);
// Change 2nd bar to red (display).
wpChartChartTitleBar.datasets[0].bars[1].fillColor = "rgba(229,12,12,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].strokeColor = "rgba(229,12,12,1)";
// Change 2nd bar to red (highlight setting on mouse over)
wpChartChartTitleBar.datasets[0].bars[1].highlightFill = "rgba(0,229,0,0.7)";
wpChartChartTitleBar.datasets[0].bars[1].highlightStroke = "rgba(0,229,0,1)";
wpChartChartTitleBar.update();