Bar Chart

Code

const ctx = document.getElementById('barChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Revenue (k$)',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
      borderRadius: 4,
      barPercentage: 0.8
    }]
  },
  options: {
    responsive: true,
    scales: { y: { beginAtZero: true } }
  }
});

Explanation

Creates a vertical bar chart from a canvas context; each dataset supplies an array of values paired with the labels array. backgroundColor and borderColor can be single colors or per-bar arrays, and borderRadius softens the corners. Set y.beginAtZero to avoid misleading axes on positive data.

More Chart.js Snippets