<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [82, 18, 24, 82, 61, 51, 99],
    backgroundColor: [
      'rgba(245, 218, 40, 0.2)',
      'rgba(102, 153, 204, 0.2)',
      'rgba(71, 73, 115, 0.2)',
      'rgba(22, 27, 51, 0.2)',
      'rgba(13, 12, 29, 0.2)'
    ],
    borderColor: [
      'rgb(245, 218, 40)',
      'rgb(102, 153, 204)',
      'rgb(71, 73, 115)',
      'rgb(22, 27, 51)',
      'rgb(13, 12, 29)'
    ],
    borderWidth: 1
  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

const myChart = new Chart(
  document.getElementById('chart'),
  config
);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.