JSFiddle - React, Tailwind, and code Playground

by Leigh Quince

HTML

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>

JavaScript

var pieData = [{
    value: 24.8,
    color: "#40af49",
    label: "African American"
}, {
    value: 2.9,
    color: "#ac558a",
    label: "Other"
}, {
    value: 5.7,
    color: "#f05541",
    label: "Multi-Racial, Not Hispanic"
}, {
    value: 19.1,
    color: "#3ac2d0",
    label: "Hispanic/Latino"
}, {
    value: 6.5,
    color: "#faaf3c",
    label: "Asian"
}, {
    value: 41,
    color: "#4287b0",
    label: "White/Caucasian"
}];

var helpers = Chart.helpers;
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%",
    animateRotate: true
});
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.generateLegend();

// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function (legendNode, index) {
    helpers.addEvent(legendNode, 'mouseover', function () {
        var activeSegment = race.segments[index];
        activeSegment.save();
        race.showTooltip([activeSegment]);
        activeSegment.restore();
    });
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function () {
    race.draw();
});

race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);