CODEWITHSUNDEEP
javascriptreactjshighcharts
Florian Bienefelt
Florian Bienefelt

Reputation: 1578

Subtitle and title at bottom of highcharts

Is there a clean way of putting both title and subtitle at the bottom of a highcharts chart ?

When setting both verticalAlign to bottom, the subtitle overlaps the title, and adding a y offset makes one or the other either overflow out of the chart box, or overlap with the chart in itself.

Default behavior:

Adding 20px offset to subtitle:

I wish the chart would simply make space for both to be at the bottom, since total height and width is defined.

Upvotes: 0

Views: 3235

Answers (1)

Daniel
Daniel

Reputation: 3514

You simply need to add a marginBottom to your chart to make space for the titles. Further a negative y-attribute moves the titles upwards.

Something like the following should solve your problems:

chart: {
    type: 'pie',
    marginBottom: 80
},
title: {
    text: 'Main title',
    verticalAlign: 'bottom',
    y: -30
},
subtitle: {
    text: 'My subtitle',
    verticalAlign: 'bottom',
    y: -10
}

As also illustrated in this fiddle.

Upvotes: 1

Related Questions