JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="w">
    <canvas id="d1" height="400" width="400"></canvas>
    <canvas id="d2" height="320" width="320"></canvas>
</div>
<div id="chartjs-tooltip"></div>

CSS

#w {
    position: relative;
    height: 400px;
    width: 400px;
}
#d1, #d2 {
    position: absolute;
}
#d1 {
    top: 0px;
    left: 0px;
}
#d2 {
    border-radius: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#chartjs-tooltip.above {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0, 0, 0, .8) transparent;
    border-width: 8px 8px 0 8px;
    bottom: 1em;
    content:"";
    display: block;
    left: 50%;
    top: 100%;
    position: absolute;
    z-index: 99;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

JavaScript

function getCustomTooltipFunction(offset) {
    return function (tooltip) {
        // Tooltip Element
        var tooltipEl = $('#chartjs-tooltip');

        // Hide if no tooltip
        if (!tooltip) {
            tooltipEl.css({
                opacity: 0
            });
            return;
        }

        // Set caret Position
        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

        // Set Text
        tooltipEl.html(tooltip.text);

        // Display, position, and set styles for font
        tooltipEl.css({
            opacity: 1,
            left: tooltip.x + offset + 'px',
            top: tooltip.y + offset + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }
}

var doughnutData = [{
    value: 20,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
}, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
}, {
    value: 30,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
}, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
}

];

var doughnutData2 = [{
    value: 10,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
}, {
    value: 100,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
}, {
    value: 20,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}, {
    value: 60,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
}, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
}

];

var ctx1 = $("#d1").get(0).getContext("2d");
var myChart1 = new Chart(ctx1).Doughnut(doughnutData, {
    percentageInnerCutout: 90,
    customTooltips: getCustomTooltipFunction(0)
});

var ctx2 = $("#d2").get(0).getContext("2d");
var myChart2 =...