score:0

i don't know chart.js but i think this is the result you were looking for.

var ctx = document.getelementbyid("mychart").getcontext("2d");

var mychart = new chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
      label: "number of votes",
      data: [12, 19, 3, 5, 2, 3],
      backgroundcolor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      bordercolor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderwidth: 1

    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          beginatzero: true
        }
      }
    }
  }
});
.chart-container {
  display: flex;
  justify-content: center;
}

canvas {
  max-width: 400px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!--create node-->
<div class="chart-container">
    <canvas id="mychart"></canvas>
</div>


Related Query

More Query from same tag