Histograms show the frequency distribution of continuous data. They are a good choice for when the data is larger than could be plotted on a bar chart and can be used to find underlying trends in continuous data.
Histograms require at least one numeric attribute in the data to be specified using the
xKey property. Data will be distributed into bins according to the
The simplest configuration for a Histogram Series is shown below:
By default the histogram will split the x domain of the data into around ten
regular-width bins, although the exact number generated will vary so that the
chart can find round values for the bin boundaries. This is similar to how giving
a number of ticks to an axis does not guarantee that exact number of ticks.
The number of bins to aim for can be overridden by setting the
property on a histogram series.
Given enough data, charts with more bins are able to more precisely illustrate underlying trends, but are also more sensitive to random noise.
Rather than specify the number of bins, for cases where you know exactly which bins
you wish to split your x-axis values into, it is possible to explicitly give the
start and end values for each bin.
This is given using the
bins property, and the value should be an array
of arrays where each inner array contains the start and end value of a bin.
In the example below, the data from the race is split into irregular age categories.
For histogram charts with irregular bins it is usual for the area of the bar,
rather than its height, to visually represent the value of each bin.
In this way the shape of the underlying curve is maintained over irregular intervals.
areaPlot property should be set to
to enable this mode.
Note that if you give the
bins property you should not also give
binCount, but if both are present
bins takes precedence.
The histograms shown above all contain a single
xKey with it's frequency plotted on the y axis.
However it is sometimes useful to visualise an
yKey using a Histogram.
When using XY Histograms it is also useful to control how bins are aggregated using the
series property. The following sections contrast the
mean aggregation functions.
To show the summing of one column or attribute for each of the bins. When a
yKey is given the default
behaviour is to plot a total of the
yKey values. The kind of aggregation to use is controlled by the
Showing frequencies or summing up the y-values isn't always the best way to show your data. For data that is not evenly distributed in x, but is relatively uniform in y, a sum plot xy histogram will tend to be dominated by the populations of the x-bins. In the above example you may notice that the prize money distribution very closely follows the age distribution, so that while potentially useful, the chart does not reveal any new trends in the data. In many cases, plotting the mean of a bin on the y-axis better illustrates an underlying trend in the data:
|The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.|
|Whether or not to display the series.|
|Whether or not to include the series in the legend.|
|Whether or not to show tooltips when the series are hovered over.|
|Function used to create the content for tooltips.|
|The key to use to retrieve x-values from the data.|
|A human-readable description of the x-values.|
|The key to use to retrieve y-values from the data.|
|A human-readable description of the y-values.|
|The number of bins to try to split the x axis into. Clashes with the |
|Set the bins explicitly. The bins need not be of equal width. Clashes with the |
|Dictates how the bins are aggregated. If set to 'sum', the value shown for the bins will be the total of the yKey values. If set to 'mean', it will display the average yKey value of the bin|
|For variable width bins, if true the histogram will represent the aggregated |
|Configuration for the highlighting used when the markers are hovered over. See highlightStyle for more details about this configuration object.|
|The colour of the fill for the histogram bars.|
|The opacity of the fill for the histogram bars.|
|The colour of the stroke for the histogram bars.|
|The opacity of the stroke for the histogram bars.|
|The width in pixels of the stroke for the histogram bars.|
|A map of event names to event listeners. See listeners for more details about this configuration object.|
Configuration for the highlighting used when the markers are hovered over.
|The fill colour of the markers when hovered over.|
|The colour of the stroke around the markers when hovered over.|
A map of event names to event listeners.
|The listener to call when a histogram bar is clicked.|
Continue to the next section to learn about layout.