It should look somehow like this:

I already have the chart, just the text is missing. Is there an option to get the text in the middle of the chart?

EDIT: An example of such a graph can be found here: /

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

It should look somehow like this:

I already have the chart, just the text is missing. Is there an option to get the text in the middle of the chart?

EDIT: An example of such a graph can be found here: https://jsfiddle/wt4260qf/1/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
    }
});

• javascript
• chart.js

• You could use the Title attribute – DTul Commented Apr 2, 2019 at 7:31
• @DTul: Sure, but this will add the title above the chart. See jsfiddle/5mty0z32. – FranzHuber23 Commented Apr 2, 2019 at 7:39
• 1 @DTul You're right... I should have read the documentation more precisely.Of course, there is position: 'bottom'. – FranzHuber23 Commented Apr 2, 2019 at 9:51
• 1 @FranzHuber23 FYI: You cannot award a bounty to your own answer. – Neeraj Commented Apr 4, 2019 at 10:11
• 1 @baburao: Good to know. Was worth a try. – FranzHuber23 Commented Apr 4, 2019 at 12:20

3 Answers 3

Thanks to @DTul, I figured it out. The title configuration is here: https://www.chartjs/docs/latest/configuration/title.html.

I've added the following section:

title: {
   display: true,
   text: 'Custom Chart Title',
   position: 'bottom'
}

to the options.

The whole example looks now like that:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI,
        title: {
           display: true,
           text: 'Custom Chart Title',
           position: 'bottom'
        }
     }
});

The corresponding fiddle is here: https://jsfiddle/ktq8mb0z/

I used this instructions

How can I add some text in the middle of a half doughnut chart in Chart.JS?

some changes for text position and fontsize

var fontSizeToUse = 16;
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) - 80);

http://jsfiddle/vencendor/e0c8rgbm/

half-doughnut, or how I call it, a speedometer graph, is now configured with degrees:

var chart = new Chart(canvas, {
  type: 'doughnut',
  data: ['400', '200'],
  options: {
    rotation: -90,
    circumference: 180,
}

I did this in Chartjs version 3.5.1