Doughnut Chart

by jwerre

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="doughnut" width="400" height="400"></canvas>

<canvas id="bar" width="400" height="400"></canvas>

<canvas id="hbar" width="400" height="400"></canvas>

CSS

canvas {
  margin: 20px;
  display: inline-block;
  float: left;
}

JavaScript

const doughnutCanvas = document.getElementById('doughnut');
const barCanvas = document.getElementById('bar');


const colors = ['#656bb1', '#3abce5', '#77c043', '#fede78', '#f79d1d', '#e74e4e'];

Chart.defaults.set('plugins.datalabels', {
  color: '#FE777B'
});

// doughnut

const doughnut = new Chart(doughnutCanvas.getContext('2d'), {
  type: 'doughnut',
  data: {
		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
    datasets: [{
      label: 'Bounced',
      data: [15, 25, 20, 5, 18, 17, ],
      backgroundColor: colors,
      borderWidth: 0,
    }]
  },
  options: {
    cutout: "90%",
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  }
});

doughnut.canvas.parentNode.style.height = '400px';
doughnut.canvas.parentNode.style.width = '400px';

// bar

const bar = new Chart(barCanvas.getContext('2d'), {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
    datasets: [{
        label: 'First dataset',
        data: [10, 20, 30, 40, 50, 60, 50, 20],
        backgroundColor: colors[0],
        borderSkipped: false,
     }]
  },
  options: {
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  }
});

bar.canvas.parentNode.style.height = '400px';
bar.canvas.parentNode.style.width = '400px';