chartjs doughnut sampe

by Yohan Yang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-doughnutlabel/2.0.3/chartjs-plugin-doughnutlabel.js"></script>
<div id="chartContainer">
  <canvas id="chart" ></canvas>
</div>

CSS

#chartContainer {
  width: 200px;
  height: 200px;
}

JavaScript

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'doughnut',
    data: {datasets: [{
        backgroundColor: ['rgba(0, 0, 255, .5)', 'rgba(0, 0, 0, .1)'],
        data: [60, 40]
    }],
    labels: [
        'Red',
        'Yellow'
    ]
  }, // data
    options: {
    	events: [],
      cutoutPercentage: 40,
      legend: {
        display: false,
        responsive: false
      },
      Tooltip: {
        enabled: false
      },
      plugins: {
        datalabels: {
          display: true,
          backgroundColor: '#ccc',
          borderRadius: 3,
          font: {
            color: 'red',
            weight: 'bold',
          }
        },
        doughnutlabel: {
          labels: [{
            text: '65%',
            color: 'rgba(0, 0, 255, .8)',
            font: {
              size: 20,
              weight: 'bold'
            }
          }]
        }
    }
    }
});