Charts.css

# Heading

The heading briefly describes the chart content and its data.

# 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:

# Heading Size

Since the <caption> element is separated from the <tbody>, the chart proportions will remain the same whether you use a short or long heading.

Short heading
Year Progress
2016
2017
2018
2019
2020
Open in:
A lengthy chart heading that spans across multiple lines
Year Progress
2016
2017
2018
2019
2020
Open in:

# Style the Heading

To style the heading, use regular HTML inside the <caption>:

<caption>
  Chart <em>heading</em> with custom HTML tags
  inside the <code>caption</code> element.
</caption>
1
2
3
4

Or regular CSS, targeting the chart caption:

#my-chart .column caption {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.25rem;
}
1
2
3
4
5
Chart heading styled with custom CSS
Year Progress
2016
2017
2018
2019
2020
Open in:
Chart heading styled with HTML tags
Year Progress
2016
2017
2018
2019
2020
Open in:

← Data →