BarchartVDiv: Theming

You can setup a `backgroundColor` and the `itemTextColorDefault`.

`barHeight` and `fontSize` contribute to determine the distance between bars.

You can configure the axis color using the `axisColor` props (used in case there are values of both signs).

You can choose the hovered bar background color by providing `theme.itemBackgroundColorHover`.

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

Choose an example

Usage

<BarchartVDiv
  {items}
  barHeight = 12
  theme={{
    axisColor: 'red',
    backgroundColor: 'antiquewhite',
    fontSize: 22,
    itemBackgroundColorHover: 'cyan',
    itemBarColorHover: 'red',
    itemTextColorDefault: 'green',
    itemTextColorHover: 'orange',
  }}
/>

Props

`barHeight`

12

`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

`theme`

▶ { axisColor: "red" ,backgroundColor: "antiquewhite" ,fontSize: 22 ,itemBackgroundColorHover: "cyan" ,itemBarColorHover: "red" , … }

axisColor: "red"
backgroundColor: "antiquewhite"
fontSize: 22
itemBackgroundColorHover: "cyan"
itemBarColorHover: "red"
itemTextColorDefault: "green"
itemTextColorHover: "orange"

`title`

"Hover me!"