Labels (via mapping)

By providing a object mapping bar key -> bar label, you can control how the bar are labeled.

The chart adapts by laying out labels according to the available width, and shortening them and adding an ellipsis if necessary.

Choose an example

Usage

<BarchartVDiv
  {items}
  {keyToLabel}
/>

Props

`keyToLabel`

▶ { AL: "Albania" ,AD: "Andorra" ,AM: "Armenia" ,AT: "Austria" ,AZ: "Azerbaijan" , … }

`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