JSFiddle - React, Tailwind, and code Playground

by Ish Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

CSS

#myChart {
	height: 200px;
	width: 200px;
}

JavaScript

var data = {
    labels: [
        "Min",
        "Current",
        "Max"
    ],
    datasets: [
        {
            data: [0, 6, 10],
            backgroundColor: [
                "#EFEFEF",
                "#36A2EB",
                "#EFEFEF"
            ]
        }]
};

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 1.8;

    ctx.fillText(text, textX, textY);

    var fontSize = (height / 300).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    textY = textY + ctx.measureText(text).width + 20;
    text = "Log Rate (MPS)";
		textX = Math.round((width - ctx.measureText(text).width) / 2),

    ctx.fillText(text, textX, textY);

    var fontSize = (height / 500).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    text = "10";
		textY = height - 50;
    ctx.fillText(text, textX, textY);

    ctx.save();
  }
});


var ctx = document.getElementById("myChart");

// And for a doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
			cutoutPercentage: 50,
    	rotation: 0.90 * Math.PI,
      circumference: 1.2 * Math.PI,
			legend: {
				display: false
			}
    }
});