https://rrdevelopmentwi.com/js/js-plugins/donut-chart.js

1var data = {
2    labels: [
3        "Shopify",
4        "Squarespace",
5        "Wixx",
6        "Weebly"
7    ],
8    datasets: [
9        {
10            data: [900, 800, 700, 500],
11            backgroundColor: [
12                "#4cc2c0",
13                "#3cb878",
14                "#fcb03b",
15                "#f15b26"
16            ]
17        }
18    ]
19};
20
21var ctx = document.getElementById("myChart");
22
23$(document).ready(function () {
24    $('#myChart').waypoint(function () {
25        Chart.pluginService.register({
26            beforeDraw: function (chart) {
27                var width = chart.chart.width,
28                    height = chart.chart.height,
29                    ctx = chart.chart.ctx;
30
31                ctx.restore();
32                var fontSize = (height / 100).toFixed(2);
33                ctx.font = fontSize + "em sans-serif";
34                ctx.textBaseline = "middle";
35
36                var text = "$$$",
37                    textX = Math.round((width - ctx.measureText(text).width) / 2),
38                    textY = height / 2;
39
40                ctx.fillText(text, textX, textY);
41                ctx.save();
42            }
43        });
44
45        var myDoughnutChart = new Chart(ctx, {
46            type: 'doughnut',
47            data: data,
48            options: {
49                legend: {
50                    display: false
51                },
52                plugins: {
53                    centerText: {
54                        enabled: true,
55                        text: '$$$',
56                        color: '#000000',
57                        fontStyle: 'bold',
58                        sidePadding: 20
59                    }
60                }
61            },
62            animation: {
63                animateScale: true
64            }
65        });
66        this.destroy();
67    }, { offset: '75%' });
68});
69