Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Histogram Chart

A histogram is a chart that groups numeric data into bins, displaying the bins as segmented columns.

Histogram charts are used to depict the distribution of a dataset: how often values fall into ranges.

Google Charts automatically chooses the number of bins for you. All bins are equal width and have a height proportional to the number of data points in the bin.

A histogram chart is rendered within the browser using SVG or VML.

Like all Google charts, histogram charts display tooltips when the user hovers over the data.


Basic Histogram Chart

The following example shows how to draw a basic histogram chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the corechart package and set a callback google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Roll No', 'height'], ['1', 80],['2', 55],['3', 68],['4', 80],['5', 54], ['6', 70],['7', 85],['8', 78],['9', 70],['10', 58], ['11', 90],['12', 65],['13', 88],['14', 82],['15', 65], ['16', 86],['17', 45],['18', 62],['19', 84],['20', 75], ['21', 82],['22', 75],['23', 58],['24', 70],['25', 85] ]); // Set chart options var options = { title: 'Students height, in cm', legend: {position: 'none'} }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.Histogram(document.getElementById('chart-div')); chart.draw(data, options); }


Controlling Colors

Following is an example of a histogram chart with custom color.

As with all Google Charts, colors can be specified either as English names or as hex values.

// Set chart options var options = { title: 'Students height, in cm', legend: {position: 'none'}, colors: ['#F98923'] };
Run code

Controlling Buckets

By default, Google Charts will choose the bucket size automatically, using a well-known algorithm for histograms.

However, you can override that using histogram.bucketSize and histogram.lastBucketPercentile options.

Following is an example of a histogram chart with custom bucket size.

// Set chart options var options = { title: 'Students height, in cm', legend: {position: 'none'}, colors: ['#F98923'], histogram: {bucketSize: 5} };
Run code

In the following example, we show how to expand the range of the buckets and display many more buckets with no gap between them.

// Set chart options var options = { title: 'Approximating Normal Distribution', legend: { position: 'none' }, colors: ['#4285F4'], chartArea: { width: 400 }, hAxis: {ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]}, bar: { gap: 0 }, histogram: { bucketSize: 0.02, maxNumBuckets: 400, minValue: -1, maxValue: 1 } };
Run code

The hAxis.ticks option specify the ticks to display for each of the buckets.

The histogram.maxNumBuckets option can be used to increase the default number of buckets.

The histogram.minValue and histogram.maxValue options will expand the range of the buckets.

Note: We specify the chartArea.width such that the number of buckets will fit more precisely without visual artifacts.


Multiple Series

Following is an example of a histogram chart with multiple series.

// Set chart options var options = { title: 'Students Height and Weight', legend: { position: 'bottom' } };
Run code