dokato/doughnut_chart.html

## doughnut_chart.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>

<body>
    <div width="100px" height="100px">
        <canvas id="myChart"></canvas>
    </div>
</body>

<script>

var ctx = document.getElementById('myChart').getContext('2d');

Chart.pluginService.register({
      beforeDraw: function(chart) {
        if (chart.config.options.elements.center) {
          var ctx = chart.chart.ctx;
          var centerConfig = chart.config.options.elements.center;
          var fontStyle = centerConfig.fontStyle || 'Arial';
          var txt = centerConfig.text;
          var color = centerConfig.color || '#000';
          var maxFontSize = centerConfig.maxFontSize || 75;
          var sidePadding = centerConfig.sidePadding || 20;
          var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
          // Start with a base font of 30px
          ctx.font = "30px " + fontStyle;

          // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
          var stringWidth = ctx.measureText(txt).width;
          var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

          // Find out how much the font can grow in width.
          var widthRatio = elementWidth / stringWidth;
          var newFontSize = Math.floor(30 * widthRatio);
          var elementHeight = (chart.innerRadius * 2);

          // Pick a new font size so it will not be larger than the height of label.
          var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
          var minFontSize = centerConfig.minFontSize;
          var lineHeight = centerConfig.lineHeight || 25;
          var wrapText = false;

          if (minFontSize === undefined) {
            minFontSize = 20;
          }

          if (minFontSize && fontSizeToUse < minFontSize) {
            fontSizeToUse = minFontSize;
            wrapText = true;
          }

          // Set font settings to draw it correctly.
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
          var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
          ctx.font = fontSizeToUse + "px " + fontStyle;
          ctx.fillStyle = color;

          ctx.fillText(txt, centerX, centerY);
          ctx.font = "25px " + fontStyle;
          ctx.fillText('Text with subtitle', centerX, centerY + 60);
        }
      }
    });

function drawDoughnut(inputData) {
    if (inputData === null)
        inputData = Math.floor(Math.random()*10);
    var config = {
        type: 'doughnut',
        data: {
            labels: ["Yes", "No"],
            datasets: [{
            data: [inputData, 10-inputData],
            backgroundColor: [
                "#FF6384",
                "#36A2EB"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB"
            ]
            }]
        },
        options: {
            cutoutPercentage : 80,
            legend: {
                display: false
            },
            elements: {
            center: {
                text: inputData +'/10',
                fontStyle: 'Arial',
                sidePadding: 20,
                minFontSize: 25,
                lineHeight: 25
            }
            }
        }
    };
    var myChart = new Chart(ctx, config);
    console.log(inputData);
};

drawDoughnut(null);

</script>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
	</head>

	<body>
	<div width="100px" height="100px">
	<canvas id="myChart"></canvas>
	</div>
	</body>

	<script>

	var ctx = document.getElementById('myChart').getContext('2d');

	Chart.pluginService.register({
	beforeDraw: function(chart) {
	if (chart.config.options.elements.center) {
	var ctx = chart.chart.ctx;
	var centerConfig = chart.config.options.elements.center;
	var fontStyle = centerConfig.fontStyle \|\| 'Arial';
	var txt = centerConfig.text;
	var color = centerConfig.color \|\| '#000';
	var maxFontSize = centerConfig.maxFontSize \|\| 75;
	var sidePadding = centerConfig.sidePadding \|\| 20;
	var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
	// Start with a base font of 30px
	ctx.font = "30px " + fontStyle;

	// Get the width of the string and also the width of the element minus 10 to give it 5px side padding
	var stringWidth = ctx.measureText(txt).width;
	var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

	// Find out how much the font can grow in width.
	var widthRatio = elementWidth / stringWidth;
	var newFontSize = Math.floor(30 * widthRatio);
	var elementHeight = (chart.innerRadius * 2);

	// Pick a new font size so it will not be larger than the height of label.
	var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
	var minFontSize = centerConfig.minFontSize;
	var lineHeight = centerConfig.lineHeight \|\| 25;
	var wrapText = false;

	if (minFontSize === undefined) {
	minFontSize = 20;
	}

	if (minFontSize && fontSizeToUse < minFontSize) {
	fontSizeToUse = minFontSize;
	wrapText = true;
	}

	// Set font settings to draw it correctly.
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
	var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
	ctx.font = fontSizeToUse + "px " + fontStyle;
	ctx.fillStyle = color;

	ctx.fillText(txt, centerX, centerY);
	ctx.font = "25px " + fontStyle;
	ctx.fillText('Text with subtitle', centerX, centerY + 60);
	}
	}
	});

	function drawDoughnut(inputData) {
	if (inputData === null)
	inputData = Math.floor(Math.random()*10);
	var config = {
	type: 'doughnut',
	data: {
	labels: ["Yes", "No"],
	datasets: [{
	data: [inputData, 10-inputData],
	backgroundColor: [
	"#FF6384",
	"#36A2EB"
	],
	hoverBackgroundColor: [
	"#FF6384",
	"#36A2EB"
	]
	}]
	},
	options: {
	cutoutPercentage : 80,
	legend: {
	display: false
	},
	elements: {
	center: {
	text: inputData +'/10',
	fontStyle: 'Arial',
	sidePadding: 20,
	minFontSize: 25,
	lineHeight: 25
	}
	}
	}
	};
	var myChart = new Chart(ctx, config);
	console.log(inputData);
	};

	drawDoughnut(null);

	</script>