JSFiddle - React, Tailwind, and code Playground
by Sumesh KP
HTML
<script src="https://rawgit.com/nnnick/Chart.js/2.0.0-alpha3/Chart.js"></script>
<div id="canvas-holder" style="width:100%">
<canvas id="chart-area" width="500" height="500" />
</div>
JavaScript
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
}, {
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
}, {
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Dark Grey"
]
},
options: {
//responsive: true,
tooltips: {
callbacks: {
label: function (item, data) {
console.log(item)
var label = data.datasets[item.datasetIndex].labels[item.index];
var value =...