Distribution / Beginner

Histogram

Show frequency distribution of continuous data.

Interactive Chart Preview

JAVASCRIPT

Live, interactive exampleChart.js

Edit the column names and values to update your chart. Changes stay in this page until you reload.

Chart data editor
Row#	Lower boundary	Upper boundary	Whole count	Remove row
1
2
3
4
5
6
7
8
9
10

10 / 200 rows

Use consecutive, equal-width bins and nonnegative whole counts. Each bin includes its start; only the final bin includes its end.

Chart.js Code Example

JAVASCRIPT

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "binHeaders": [
    "Bin Start",
    "Bin End",
    "Frequency"
  ],
  "bins": [
    {
      "start": 0,
      "end": 10
    },
    {
      "start": 10,
      "end": 20
    },
    {
      "start": 20,
      "end": 30
    },
    {
      "start": 30,
      "end": 40
    },
    {
      "start": 40,
      "end": 50
    },
    {
      "start": 50,
      "end": 60
    },
    {
      "start": 60,
      "end": 70
    },
    {
      "start": 70,
      "end": 80
    },
    {
      "start": 80,
      "end": 90
    },
    {
      "start": 90,
      "end": 100
    }
  ],
  "labels": [
    "0-10",
    "10-20",
    "20-30",
    "30-40",
    "40-50",
    "50-60",
    "60-70",
    "70-80",
    "80-90",
    "90-100"
  ],
  "datasets": [
    {
      "label": "Frequency",
      "data": [
        5,
        12,
        25,
        32,
        28,
        18,
        12,
        6,
        2,
        1
      ],
      "backgroundColor": "rgba(99, 102, 241, 0.7)",
      "borderColor": "rgb(99, 102, 241)",
      "borderWidth": 1,
      "barPercentage": 1,
      "categoryPercentage": 1
    }
  ]
};

function createConfig(chartData) {
    let chartType = 'bar';
    let options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
        },
    };
    chartType = 'bar';
    options.scales = {
        y: {
            beginAtZero: true,
            title: { display: true, text: chartData.datasets[0].label },
            grid: { color: 'rgba(0, 0, 0, 0.1)' },
        },
        x: {
            title: { display: true, text: (chartData.binHeaders ?? ['Bin Start', 'Bin End']).slice(0, 2).join(' / ') },
            grid: { display: false },
        },
    };
    return { type: chartType, data: structuredClone(chartData), options };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

Run This Example

Install the package below in a browser project such as Vite. Put the copied code in a client JavaScript module and add this container to the page before the module runs.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>

The example includes its sample data. When removing the chart, destroy or dispose of its instance and disconnect any resize observer.

Reading This Example

The default Chart.js example contains 141 illustrative observations already grouped into ten equal-width bins. The 30-40 bin has the highest frequency, 32, followed by 40-50 with 28. The table contains bin counts, not the original individual scores.

All library tabs use these illustrative values. Rendering styles and library APIs differ, so use the table to compare exact numbers.

About this example & sample data

Sample values used in the chart
Score Range	Frequency
0-10	5
10-20	12
20-30	25
30-40	32
40-50	28
50-60	18
60-70	12
70-80	6
80-90	2
90-100	1

READ THE CHART

Understand How Values Are Distributed

A histogram groups numeric observations into intervals and counts how many fall in each interval. It helps you inspect the center, spread, skew, and possible multiple peaks of a distribution.

Start With Measurements

Use a numeric variable such as a score, duration, or temperature. Define interval boundaries so each observation belongs to one bin. If you already have bin counts, plot those counts directly instead of binning them again.

Choose Bins Deliberately

Very wide bins can hide structure; very narrow bins can make random variation look important. Compare a few sensible widths. With unequal bin widths, use frequency density so bar area, rather than height alone, represents frequency.

Read Shape and Spread

Look for where observations concentrate, how far the values extend, and whether one tail is longer. A gap or a second peak can suggest different groups, but the histogram alone does not explain their cause.

Distinguish It From a Bar Chart

Histogram bins follow a numeric order and usually touch. Bar charts compare named categories and can be reordered. Use a box plot to compare compact distribution summaries across groups.