ColorBinsDiv

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

This will render the legend in a `div`.

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

Choose an example

Usage

<ColorBinsDiv
  {bins}
  flags={{withBackground: true}}
  padding='3em'
  theme={{
    backgroundColor: '#feffd4',
  }}
  title='A legend'
/>

Props

bins

    ▶ (11) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]
    • 0: { range: Array(2) ,color: "red" }
    • 1: { range: Array(2) ,color: "yellow" }
    • 2: { range: Array(2) ,color: "palegreen" }
    • 3: { range: Array(2) ,color: "cyan" }
    • 4: { range: Array(2) ,color: "khaki" }
    • 5: { range: Array(2) ,color: "lightskyblue" }
    • 6: { range: Array(2) ,color: "blue" }
    • 7: { range: Array(2) ,color: "magenta" }
    • 8: { range: Array(2) ,color: "orange" }
    • 9: { range: Array(2) ,color: "violet" }
    • 10: { range: Array(2) ,color: "brown" }
    • length: 11

flags

    ▶ { withBackground: true }
    • withBackground: true

padding

    "3em"

theme

    ▶ { backgroundColor: "#feffd4" }
    • backgroundColor: "#feffd4"

title

    "A legend"

A legend