ColorBinsG: styles

You can customise colors and strokes.

Usage

<ColorBinsG
  {bins}
  {height}
  {width}
  flags={{
    withBackground: true
  }}
  geometry={{
    left: 40,
    right: 40,
  }}
  selectedBins={[2, 4, 5, 6]}
  theme={{
    backgroundColor: 'palegreen',
    backgroundOpacity: 0.1,
    binStroke: 'black',
    binStrokeWidth: 0.5,
    fontSize: 30,
    selectedBinStroke: 'red',
    selectedBinStrokeWidth: 3,
    textColor: 'blue',
  }}
/>

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

geometry

    ▶ { left: 40 ,right: 40 }
    • left: 40
    • right: 40

selectedBins

    ▶ (4) [ 2 ,4 ,5 ,6 ]
    • 0: 2
    • 1: 4
    • 2: 5
    • 3: 6
    • length: 4

theme

    ▶ { backgroundColor: "palegreen" ,backgroundOpacity: 0.1 ,binStroke: "black" ,binStrokeWidth: 0.5 ,fontSize: 30 , … }
    • backgroundColor: "palegreen"
    • backgroundOpacity: 0.1
    • binStroke: "black"
    • binStrokeWidth: 0.5
    • fontSize: 30
    • selectedBinStroke: "red"
    • selectedBinStrokeWidth: 3
    • textColor: "blue"