Vue Charts.css

# Heading

A heading briefly describing the content of the chart.

# Add a Heading

Semantically speaking, any content on the page should have a heading.



 


<charts-css
    type="column"
    heading="Custom Heading"
/>
1
2
3
4

# Display the Heading

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




 


<charts-css
    type="column"
    heading="Custom Heading"
    show-heading
/>
1
2
3
4
5

or




 


<charts-css
    type="column"
    heading="Custom Heading"
    :show-heading="true"
/>
1
2
3
4
5
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

You can also do this with a prop.





 


<charts-css
    type="column"
    heading="Custom Heading"
    :show-heading="true"
    heading-size="3rem"
/>
1
2
3
4
5
6
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:

← Datasets →