KamCode: Doughnut Chart

Doughnut Chart

Level Up Your Data Visualization with Doughnut Charts | Chart.js

How to create Analog Clock using Html Css and Javascrip

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Doughnut chart</title>
</head>
<body>
    <div class="container">
        <canvas id="doughnut" width="400" height="400"></canvas>
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

JAVASCRIPT

const doughnut = document.getElementById('doughnut');

new Chart(doughnut, {
  type: 'doughnut',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'red',
        'blue',
        'yellow',
        'green',
        'purple',
        'orange'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

Doughnut Chart

Level Up Your Data Visualization with Doughnut Charts | Chart.js

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.