Create Histogram Chart Using Chart.JS

   blog 3 minutes read (About 487 words)  visits

Introduction

Chart.JS is a popular and free open-source JavaScript library for data visualization. However, Chart.JS does not natively support histogram.

In this blog post, I would like to quickly show how to use Chart.JS to create histogram chart in HTML.

Histogram Chart

Ideally, the input to histogram is an array of 1D data. Then we specify the bin size of the histogram and the number of samples in each bin will be counted by the histogram plot function. To create histogram using Chart.JS, because Chart.JS supports bar chart but does not natively support histogram, we would have to manually count the number of samples in each bin, and use the 2D counted data to create a bar chart, as if it were histogram chart.

HTML Histogram Chart

The histogram chart in HTML that we will create looks like as follows.

HTML Histogram Chart JavaScript

The HTML Histogram chart JavaScript code was mostly taken from the Chart.JS Histogram Series with some modifications.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="author" content="Chart.js">
  <title>Histogram</title>
</head>

<body>

<style type="text/css">
  .chartBox {
    width: 80%;
    margin: auto;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>

<div class="chartBox">
  <canvas id="myChart"></canvas>
</div>

<script>
const x_vals = [0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5];
const y_vals = [5, 8, 24, 16, 32, 42, 30, 17, 11];
const data = x_vals.map((k, i) => ({x: k, y: y_vals[i]}));

const backgroundColor = Array(x_vals.length).fill('rgba(255, 99, 132, 0.2)');
const borderColor = Array(x_vals.length).fill('rgba(255, 99, 132, 1)');

const backgroundColor[parseInt(x_vals.length / 2)] = 'rgba(54, 162, 235, 0.2)';
const borderColor[parseInt(x_vals.length / 2)] = 'rgba(54, 162, 235, 1)';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Num of Visitors',
            data: data,
            backgroundColor: backgroundColor,
            borderColor: borderColor,
            borderWidth: 1,
            barPercentage: 1,
            categoryPercentage: 1,
            borderRadius: 5,
        }]
    },
    options: {
        scales: {
            x: {
                type: 'linear',
                offset: false,
                grid: {
                  offset: false
                },
                ticks: {
                  stepSize: 1
                },
                title: {
                  display: true,
                  text: 'Hours',
                  font: {
                      size: 14
                  }
                }
            }, 
            y: {
                // beginAtZero: true
                title: {
                  display: true,
                  text: 'Visitors',
                  font: {
                      size: 14
                  }
                }
            }
        },
        plugins: {
          legend: {
              display: false,
            },
          tooltip: {
            callbacks: {
              title: (items) => {
                if (!items.length) {
                  return '';
                }
                const item = items[0];
                const x = item.parsed.x;
                const min = x - 0.5;
                const max = x + 0.5;
                return `Hours: ${min} - ${max}`;
              }
            }
          }
        }
    }
});
</script>

</body>
</html>

References

Create Histogram Chart Using Chart.JS

https://leimao.github.io/blog/JavaScript-ChartJS-Histogram/

Author

Lei Mao

Posted on

05-07-2022

Updated on

05-07-2022

Licensed under

 

Like this article? Support the author with

Comments

  Follow   Sponsor

Catalogue

×