JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/Chart.min.js"></script>

JavaScript

Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.fill = false;
Chart.defaults.global.elements.line.borderColor = "rgba(0,185,234,1)";
Chart.defaults.global.elements.line.borderWidth = 5;
Chart.defaults.global.elements.rectangle.borderWidth = 1;
Chart.defaults.global.elements.rectangle.backgroundColor = "rgba(0,185,234,1)";
Chart.defaults.global.elements.arc.borderColor = "transparent";
Chart.defaults.global.defaultColor = "rgba(0,163,217,1)";
Chart.defaults.global.elements.point.backgroundColor = "rgba(0,163,217,1)";
Chart.defaults.doughnut.cutoutPercentage = 80;
Chart.defaults.global.events = [];
Chart.defaults.global.animation.onComplete = Chart.defaults.global.animation.onProgress = function(obj) {
  if (this.config.type == "doughnut") {
    var ctx = this.chart.ctx;
    ctx.save();
    
    var cx=this.chart.canvas.width/(2*(window.devicePixelRatio||1));
		var cy=this.chart.canvas.height/(2*(window.devicePixelRatio||1));
    
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '14px verdana';
    ctx.fillStyle = 'black';
    var completion = 1;
    if (obj)
    	completion = obj.animationObject.currentStep / obj.animationObject.numSteps;
    
		ctx.fillText((this.config.data.datasets[0].data[0] * completion).toFixed(0)+"%", cx, cy);
    ctx.restore();
  }
};


function n2day(n) {
  return ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"][n - 1];
}

function fullWeek(data) {
  var labels = data.labels;
  var data = data.datasets[0].data;
  if (data.length != labels.length) {
    window.alert("ERROR - data and labels size does not match");
    return;
  }
  var template = {
    "labels": [1, 2, 3, 4, 5, 6, 7],
    "datasets": [{
      "data": [0, 0, 0, 0, 0, 0, 0]
    }]
  };

  for (var i = 0; i < data.length; i++) {
    template.datasets[0].data[labels[i] - 1] = data[i];
  }

  for (var i = 0; i < template.labels.length; i++) {
    template.labels[i] = n2day(i + 1);
  }

 ...