Bars color (via colorscale function)

You can pass a function `valueToColorFn` on the value returned by `valueAccessor`.

Note that if you also pass `keyToColor` and/or `keyToColorFn`, the order of precedence will be `keyToColor`, then eventually `keyToColorFn` then eventually `valueToColorFn`.

Also note that the fallback color is `itemBarColorDefault` (which falls back to `black` if `itemBarColorDefault` is not provided).

Choose an example

Usage

<BarchartVDiv
  {items}
  {valueToColorFn}
/>

Props

items

    (49) [ {…} ,{…} ,{…} ,{…} ,{…} , ]
    • 0: { key: "SE" ,value: 768 }
    • 1: { key: "RU" ,value: 678 }
    • 2: { key: "IS" ,value: 578 }
    • 3: { key: "BG" ,value: 568 }
    • 4: { key: "DE" ,value: 567 }
    • 5: { key: "SI" ,value: 567 }
    • 6: { key: "CY" ,value: 456 }
    • 7: { key: "FI" ,value: 376 }
    • 8: { key: "AT" ,value: 357 }
    • 9: { key: "FR" ,value: 346 }
    • 10: { key: "DK" ,value: 345 }
    • 11: { key: "SM" ,value: 345 }
    • 12: { key: "AD" ,value: 234 }
    • 13: { key: "ME" ,value: 223 }
    • 14: { key: "HR" ,value: 213 }
    • 15: { key: "AZ" ,value: 123 }
    • 16: { key: "AL" ,value: 112 }
    • 17: { key: "NO" ,value: 79 }
    • 18: { key: "TR" ,value: 78 }
    • 19: { key: "LT" ,value: 69 }
    • 20: { key: "MC" ,value: 69 }
    • 21: { key: "RS" ,value: 67 }
    • 22: { key: "LV" ,value: 58 }
    • 23: { key: "MD" ,value: 57 }
    • 24: { key: "MK" ,value: 57 }
    • 25: { key: "BY" ,value: 56 }
    • 26: { key: "CH" ,value: 56 }
    • 27: { key: "GB" ,value: 56 }
    • 28: { key: "GR" ,value: 47 }
    • 29: { key: "PT" ,value: 46 }
    • 30: { key: "EE" ,value: 37 }
    • 31: { key: "RO" ,value: 37 }
    • 32: { key: "AM" ,value: 36 }
    • 33: { key: "MT" ,value: 36 }
    • 34: { key: "NL" ,value: 35 }
    • 35: { key: "IE" ,value: 24 }
    • 36: { key: "HU" ,value: 23 }
    • 37: { key: "LU" ,value: 23 }
    • 38: { key: "SK" ,value: 23 }
    • 39: { key: "ES" ,value: 23 }
    • 40: { key: "CZ" ,value: 21 }
    • 41: { key: "GE" ,value: 17 }
    • 42: { key: "BE" ,value: 15 }
    • 43: { key: "BA" ,value: 12 }
    • 44: { key: "PL" ,value: 12 }
    • 45: { key: "IT" ,value: 6 }
    • 46: { key: "KZ" ,value: 5 }
    • 47: { key: "LI" ,value: 5 }
    • 48: { key: "UA" ,value: 2 }
    • length: 49

valueToColorFn

    ƒ scale(x)
    • length: 1
    • name: "scale"
    • prototype: { constructor: ƒ }
    • [[Function]]: function scale(x) { return x != null && x <= x ? range[bisect(domain, x, 0, n)] : unknown; }
    • [[Prototype]]: ƒ ()
S…768 R…678 I…578 B…568 D…567 S…567 C…456 F…376 A…357 F…346 D…345 S…345 A…234 M…223 H…213 A…123 A…112 N…79 T…78 L…69 M…69 R…67 L…58 M…57 M…57 B…56 C…56 G…56 G…47 P…46 E…37 R…37 A…36 M…36 N…35 I…24 H…23 L…23 S…23 E…23 C…21 G…17 B…15 B…12 P…12 I…6 K…5 L…5 U…2