Two DoughnutChart

Two DoughnutChart with Text in the middle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>
<canvas id="myChart1"></canvas>

JavaScript

var data = {
  labels: [
    "White",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FFF",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FFF",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

var data2 = {
  labels: [
    "Green",
    "Yellow",
    "Red"
  ],
  datasets: [
    {
      data: [50, 20, 400],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

var DeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  elementById:('myChart'),
  data: data,
 
  options: {
  	responsive: true,
    legend: {
      display: false
    },
    title: {
            display: true,
            text: 'October'
        }
  }
});

var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
  type: 'doughnut',
  elementById:['myChart1'],
  data: data2,
  options: {
  	responsive: true,
    legend: {
      display: false
    },
    title: {
            display: true,
            text: 'November'
        }
  }
});


 

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";
    console.log (chart.options.title.text);
    var text = chart.options.title.text;
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});








/*Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height /...