Hero key

You can set the hero bar by providing its key.

This is useful when we select the chosen key in another part of the application and we want to provide a way to see what bar correspond to the current selection.

You can set the hero bar background color by providing `theme.itemBackgroundColorHero`.

You can set the hero bar color by providing `theme.itemBarColorHero` (`null` by default, which does not affect the bar color).

By passing `shouldScrollToHeroKey` to `true` you can set chart to always scroll to the hero key, if any.

Choose an example

Usage

<BarchartVDiv
  {items}
  heroKey='CY'
  theme={{
    itemBackgroundColorHero: 'palegreen',
    itemBarColorHero: 'red',
    itemTextColorHero: 'blue',
  }}
/>

Props

heroKey

    "CY"

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: "ME" ,value: 223 }
    • 11: { key: "AL" ,value: 112 }
    • 12: { key: "NO" ,value: 79 }
    • 13: { key: "TR" ,value: 78 }
    • 14: { key: "LT" ,value: 69 }
    • 15: { key: "MC" ,value: 69 }
    • 16: { key: "RS" ,value: 67 }
    • 17: { key: "BY" ,value: 56 }
    • 18: { key: "CH" ,value: 56 }
    • 19: { key: "GB" ,value: 56 }
    • 20: { key: "GR" ,value: 47 }
    • 21: { key: "EE" ,value: 37 }
    • 22: { key: "RO" ,value: 37 }
    • 23: { key: "AM" ,value: 36 }
    • 24: { key: "MT" ,value: 36 }
    • 25: { key: "NL" ,value: 35 }
    • 26: { key: "IE" ,value: 24 }
    • 27: { key: "LU" ,value: 23 }
    • 28: { key: "SK" ,value: 23 }
    • 29: { key: "ES" ,value: 23 }
    • 30: { key: "CZ" ,value: 21 }
    • 31: { key: "GE" ,value: 17 }
    • 32: { key: "BE" ,value: 15 }
    • 33: { key: "PL" ,value: 12 }
    • 34: { key: "IT" ,value: 6 }
    • 35: { key: "LI" ,value: 5 }
    • 36: { key: "UA" ,value: 2 }
    • 37: { key: "BA" ,value: 0 }
    • 38: { key: "KZ" ,value: 0 }
    • 39: { key: "HU" ,value: -23 }
    • 40: { key: "PT" ,value: -46 }
    • 41: { key: "MD" ,value: -57 }
    • 42: { key: "MK" ,value: -57 }
    • 43: { key: "LV" ,value: -58 }
    • 44: { key: "AZ" ,value: -123 }
    • 45: { key: "HR" ,value: -213 }
    • 46: { key: "AD" ,value: -234 }
    • 47: { key: "DK" ,value: -345 }
    • 48: { key: "SM" ,value: -345 }
    • length: 49

theme

    { itemBackgroundColorHero: "palegreen" ,itemBarColorHero: "red" ,itemTextColorHero: "blue" }
    • itemBackgroundColorHero: "palegreen"
    • itemBarColorHero: "red"
    • itemTextColorHero: "blue"
S…768 R…678 I…578 B…568 D…567 S…567 C…456 F…376 A…357 F…346 M…223 A…112 N…79 T…78 L…69 M…69 R…67 B…56 C…56 G…56 G…47 E…37 R…37 A…36 M…36 N…35 I…24 L…23 S…23 E…23 C…21 G…17 B…15 P…12 I…6 L…5 U…2 B…0 K…0 H…-23 P…-46 M…-57 M…-57 L…-58 A…-123 H…-213 A…-234 D…-345 S…-345