Chart.js - Create a Histogram

We can create a histogram with Chart.js without any problem.

All we have to do is to create a bar chart with some tweaks.

HTML

To start, we add Chart.js for the chart and the canvas for Chart.js to render the chart.

We add them by writing the following HTML:

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>

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

JavaScript

Next, we create our histogram by writing some JavaScript code:

const ctx = document.getElementById('histogram').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [0, 1, 2, 3, 4],
    datasets: [{
      label: 'Number of Arrivals',
      data: [19, 28, 20, 16],
      backgroundColor: 'green',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: false,
        barPercentage: 1.3,
        ticks: {
          max: 3,
        }
      }, {
        display: true,
        ticks: {
          autoSkip: false,
          max: 4,
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We render the chart with the canvas element with the ID histogram, as we indicated in the code. In the object that we passed into the Chart constructor, we set the type to 'bar' to display a bar chart. In line 7, datasets, we add our data property to set the bar heights. In line 6, labels are the names that are displayed on the horizontal axis. label is displayed above the histogram. Then, we have to adjust the x-axis options by setting the ticks maximum to 4 to adjust them. We make the bars wider than the typical graph by setting barPercentage to 1.3 so that the 4 bars are evenly distributed between the 5 ticks of the x-axis. autoSkip set to false means that automatic calculation of how many labels can be shown or hidden is false, which lets us override the ticks with the ones we mentioned above. autoSkip being false means that we always show all labels. beginAtZero being true means that we start the y-axis at 0.

Code

The running widget below demonstrates the above code.

We can see the green bars and that the bar is between 2 ticks rather than the bar being right above each tick.

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments