Bins style

You can customise colors by providing a `binsFill` array

You can customise the bins border color and width by providing `binStroke` (a color) and `binStrokeWidth` (a number) and `textColor`.

Also see the interactivity section for selected bins style props.

Choose an example

Usage

<HistogramG
  {bins}
  {binsFill}
  {height}
  {width}
  theme={{
    binStroke: 'red',
    binStrokeWidth: 3,
  }}
/>

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

binsFill

    ▶ (9) [ "indigo" ,"lightcyan" ,"darkcyan" ,"honeydew" ,"skyblue" , … ]
    • 0: "indigo"
    • 1: "lightcyan"
    • 2: "darkcyan"
    • 3: "honeydew"
    • 4: "skyblue"
    • 5: "plum"
    • 6: "burlywood"
    • 7: "limegreen"
    • 8: "darkorange"
    • length: 9

theme

    ▶ { binStroke: "red" ,binStrokeWidth: 3 }
    • binStroke: "red"
    • binStrokeWidth: 3