Basic props

In the most basic setup, you need to provide:

• `width` and `height` (numbers).

• `bins`, an array of objects of two possible shapes:

•• `{range: [number, number], value: number}`: this will use `value` as the length of the bin

•• `{range: [number, number], values: any[]}`: this will use the length of `values` as the length of the bin

Ranges are assumed to be sorted and bins are assumed to be sorted by `range`, that is the first value of a bin `range` is greater than the second value of the previos bin `range`.

You can draw non-uniform non-contiguous bins, that is ranges don't have be to contiguous or be all of the same size.

If `bins` is undefined or empty the chart shows a message that you can customize using the props `message`, `theme.messageColor` (default: black) and `theme.messageFontSize` (default: 1rem).

Choose an example

Usage

<HistogramG
  {bins}
  {height}
  {width}
/>

Props

bins