In all charts, you will find text in different chart elements. The size, weight, and color for texts are important when it comes to creating hierarchy and balance within a chart.
| Chart element | Font size | Line height | Font weight | Color |
|---|---|---|---|---|
| 1. Chart title | 20px - Display |
28px |
Medium 500 |
 #00112C - Neutral, 100 |
| 2. Axis title | 14px - Body |
22px |
Regular 400 |
 #404D61 - Neutral, 80 |
| 3. Legend | 14px - Body |
22px |
Regular 400 |
#404D61 - Neutral, 80 |
| 4. Tooltip title | 12px - Caption |
16px |
Medium 500 |
#00112C - Neutral, 100 |
| 5. Tooltip label | 12px - Caption |
16px |
Regular 400 |
 #202F46 - Neutral, 90 |
| 6. Tooltip value | 12px - Caption |
16px |
Medium 500 |
#00112C - Neutral, 100 |
| 7. Axis label | 10px - Axis |
16px |
Medium 500 |
 #9FA6B0 - Neutral, 50 |
| 8. Axis label (hover) | 10px - Axis |
16px |
Medium 500 |
 #6F7988 - Neutral, 70 |