JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//www.chartjs.org/assets/Chart.min.js"></script>
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script>
<div id="chart-area">
<canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
<div id="legend"></div>
</div>
JavaScript
var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
}
//
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
tooltipTemplate: "<%if (label){%><%=value%>: <%}%><%= value %>"
});
//