Styling the middle text of Chart.js's doughnut chart

Question

I have exhausted all searches and cannot seem to find my answer. I'd like to style the text (not tooltips) within the middle of doughnut chart.

I have created it from Chart.js and have a number in the middle (a percentage). All works well except that I seemingly cannot style the text. I've tried Canvas' ctx to alter the font as well as css and am having no luck. Could someone please help me out with this? Thanks.

My code for the doughnut chart is:

$.getJSON("http://localhost:3000/ed_stats", function (ed_stats) {
      $(".spin-container").each(function (index) {
          if (index == 0) {
            var value = "started";
          } else if (index == 1) {
            var value = "waiting";
          } else if (index == 2) {
            var value = "q1";
            var newstuff = parseInt(JSON.stringify(ed_stats[0][value]));
            var pieData = [{
                value: newstuff,
                color: "#ED4306"
              },
              {
                value: 100 - newstuff,
                color: "#F8AB00"
              }
            ];
            var myPie = new
            Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData, {
              percentageInnerCutout: 60
            });
          } else if (index == 3) {
            var value = "q2";
            var newstuff = parseInt(JSON.stringify(ed_stats[0][value]));
            var pieData = [{
                value: newstuff,
                color: "#ED4306"
              },
              {
                value: 100 - newstuff,
                color: "#F8AB00"
              }
            ];
          };
        };
      };

like I said, everything renders just fine, I'd just like the style the text within the doughnut. Thank you!

My (not working) JSFiddle is here: https://jsfiddle.net/2nfzktzx/1/

Answer 1

Here is one possible solution of your problem. The chart from n3-charts already fullfills your requirements. Check the examples section on the page to find some more information.