Chart.js responsive doughnut with text inside

by Kvark

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div class="titre">Épreuves d'attention:</div>
<div id="red"></div>
<div class="titre">Dominos:</div>
<div id="green"></div>
<div class="titre">Syllogisms:</div>
<div id="blue"></div>
<div class="titre">Cartes:</div>
<div id="yellow"></div>
<div class="titre">Masterminds:</div>
<div id="sienna"></div>
<div class="titre">Maths:</div>
<div id="gold"></div>
<div class="titre">Énoncés courts:</div>
<div id="violet"></div>

<canvas id="myChart" width="350" height="350"></canvas>

CSS

.titre {
  float: left;
  clear: left;
  width: 300px;
  font-size: 100%;
}

#red,
#green,
#blue,
#yellow,
#sienna,
#gold,
#violet {
  float: left;
  clear: left;
  width: 300px;
  margin: 15px;
}

#swatch {
  width: 120px;
  height: 100px;
  margin-top: 18px;
  margin-left: 350px;
  background-image: none;
}

#red .ui-slider-range {
  background: #ef2929;
}

#red .ui-slider-handle {
  border-color: #ef2929;
}

#green .ui-slider-range {
  background: #8ae234;
}

#green .ui-slider-handle {
  border-color: #8ae234;
}

#blue .ui-slider-range {
  background: #729fcf;
}

#blue .ui-slider-handle {
  border-color: #729fcf;
}

#yellow .ui-slider-range {
  background: #FDB45C;
}

#yellow .ui-slider-handle {
  border-color: #FDB45C;
}

#sienna .ui-slider-range {
  background: #A0522D;
}

#sienna .ui-slider-range {
  background: #A0522D;
}

#gold .ui-slider-range {
  background: #FFD700;
}

#gold .ui-slider-range {
  background: #FFD700;
}

#violet .ui-slider-range {
  background: #EE82EE;
}

#violet .ui-slider-range {
  background: #EE82EE;
}

JavaScript

Chart.defaults.global = {
  animation: true,
  animationSteps: 60,
  animationEasing: "easeOutQuart",
  showScale: true,
  scaleOverride: false,
  scaleSteps: null,
  scaleStepWidth: null,
  scaleStartValue: null,
  scaleLineColor: "rgba(0,0,0,.1)",
  scaleLineWidth: 1,
  scaleShowLabels: true,
  scaleLabel: "<%=value%>",
  scaleIntegersOnly: true,
  scaleBeginAtZero: false,
  scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
  scaleFontSize: 12,
  scaleFontStyle: "normal",
  scaleFontColor: "#666",
  responsive: false,
  maintainAspectRatio: true,
  showTooltips: true,
  customTooltips: false,
  tooltipEvents: ["mousemove", "touchstart", "touchmove"],
  tooltipFillColor: "rgba(0,0,0,0.8)",
  tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
  tooltipFontSize: 14,
  tooltipFontStyle: "normal",
  tooltipFontColor: "#fff",
  tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
  tooltipTitleFontSize: 14,
  tooltipTitleFontStyle: "bold",
  tooltipTitleFontColor: "#fff",
  tooltipYPadding: 6,
  tooltipXPadding: 6,
  tooltipCaretSize: 8,
  tooltipCornerRadius: 6,
  tooltipXOffset: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> minutes.",
  multiTooltipTemplate: "<%= value %>",
  onAnimationProgress: function() {},
  onAnimationComplete: function() {}
}

Chart.defaults.global.responsive = false;

Chart.types.Doughnut.extend({
  name: "DoughnutTextInside",
  showTooltip: function() {
    this.chart.ctx.save();
    Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
    this.chart.ctx.restore();
  },
  draw: function() {
    Chart.types.Doughnut.prototype.draw.apply(this, arguments);

    var width = this.chart.width,
      height = this.chart.height;

    var fontSize = (height / 140).toFixed(2);
    this.chart.ctx.font = fontSize + "em Verdana";
    this.chart.ctx.textBaseline = "middle";

    var red = $("#red").slider("value"),
      green =...