HistogramDiv

If you need to render the histogram as an html element, you can use `HistogramDiv` providing the same props but `width` and `height`.

This will render the histogram in a `div`.

You can add `title` (rendered as a `h2`), `padding` (a string defaulting to '10px') and `headerHeight` (a string defaulting to '2rem')

Choose an example

Usage

<HistogramDiv
  {bins}
  flags={{withBackground: true}}
  padding='3em'
  theme={{
    backgroundColor: '#feffd4',
    binFill: 'orange',
  }}
  title='Some bins'
/>

Props

bins

    ▶ (9) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]
    • 0: { range: Array(2) ,values: Array(15) }
    • 1: { range: Array(2) ,values: Array(4) }
    • 2: { range: Array(2) ,values: Array(7) }
    • 3: { range: Array(2) ,values: Array(13) }
    • 4: { range: Array(2) ,values: Array(13) }
    • 5: { range: Array(2) ,values: Array(14) }
    • 6: { range: Array(2) ,values: Array(0) }
    • 7: { range: Array(2) ,values: Array(14) }
    • 8: { range: Array(2) ,values: Array(1) }
    • length: 9

flags

    ▶ { withBackground: true }
    • withBackground: true

padding

    "3em"

theme

    ▶ { backgroundColor: "#feffd4" ,binFill: "orange" }
    • backgroundColor: "#feffd4"
    • binFill: "orange"

title

    "Some bins"

Some bins