Skip to main content

Histogram

Renders a dataset as series of bars representing "bins", allowing the ability to view distribution of the data. The data passed in will be "binned" according to the bin prop that is provided (if any), allowing for flexibility in how these bins are determined.

info

Histograms are intended to be used with quantitative data. Please use Bar Charts for qualitative or categorical data.

Basic

See the full API here. Typically composed with VictoryChart to create full charts.

Live View
Loading...
Live Editor

Histogram - Date Bins

Histograms can be used to visualize the distribution of data over time. VictoryHistogram will automatically bin data by date if the x prop is a date. Internally it uses d3 to bin the data, so the behaviour reflects that of the d3.bin function.

Live View
Loading...
Live Editor

Histogram - Labels

Add labels to charts by setting the labels prop to the name of a property in the dataset, or a function that returns the label value. You can customize the display of the labels by using the labelComponent prop.

Live View
Loading...
Live Editor

Histogram - Tooltips

Tooltips can be added by using a VictoryTooltip component as the labelComponent.

Live View
Loading...
Live Editor

Histogram - Horizontal

Histograms can be rendered horizontally by setting the horizontal prop to true.

Live View
Loading...
Live Editor

Histogram - Combination

Histograms can be composed with other Victory components to create more complex visualizations.

Live View
Loading...
Live Editor

Histogram - Stacked

Histograms can be stacked to visualize the distribution of numerical data across different categories.

Live View
Loading...
Live Editor

Histogram - Animation

Histogram charts can be animated by setting the animate prop.

Live View
Loading...
Live Editor

Histogram - Styles

Chart styling can be customized by using the theme or overriding the style prop on the component.

Live View
Loading...
Live Editor

Standalone Rendering

Histogram charts can be rendered outside a VictoryChart.

Live View
Loading...
Live Editor

They can also be embeded in other SVG components by using the standalone prop.

Live View
Loading...
Live Editor