# Heading

A heading briefly describing the content of the chart.

# Add a Heading

Semantically speaking, any content on the page should have a heading. With <table> you should use the <caption> tag to specify the caption (or title) of a table.


 



<table>
  <caption> Custom Heading </caption>
  ...
</table>
1
2
3
4

# Display the Heading

By default the heading is hidden. To display the heading use the .show-heading class.

 




<table class="charts-css column show-heading">
  <caption> Custom Heading </caption>
  ...
</table>
1
2
3
4
Hidden Chart Heading
Year Progress
2016
2017
2018
2019
2020
Open in:
Visible Chart Heading
Year Progress
2016
2017
2018
2019
2020
Open in:

# Style the Heading

To style the heading you can use regular CSS but with very long headings you will need to increase the <caption> height. To keep the chart proportions use the --heading-size variable.



 







#my-chart {
  height: 200px;
  --heading-size: 3rem;
}
#my-chart caption {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.25rem;
}
1
2
3
4
5
6
7
8
9
A Very Long Chart Heading Without any Custom Styling Applied on Captions
Year Progress
2016
2017
2018
2019
2020
Open in:
A Very Long Chart Heading With Some Custom Styling Applied on Captions
Year Progress
2016
2017
2018
2019
2020
Open in: