rdp1414
Posts: 41
Joined: Wed Oct 27, 2021 2:06 pm

Set constant gap between title and subtitle

1. We have a usecase where we present chart in this way - See https://jsfiddle.net/aL2d4xfb/. For further discussion, we can skip legend override and setting of title.x, subtitle.x, legend.x - See https://jsfiddle.net/aL2d4xfb/1/. This works fine for numerous usecases.
2. But, when title is multi-line, then subtitle overlaps with title - See https://jsfiddle.net/aL2d4xfb/2/. Try changing output area's width by dragging using mouse.
3. This happens because https://api.highcharts.com/highcharts/subtitle.y is explicitly set. If `subtitle.y` is undefined i.e. not set, then subtitle vertically adjusts itself according to title - See https://jsfiddle.net/aL2d4xfb/3/. Try changing output area's width.
4. This is what we want and works correctly. But there is too much gap b/w title and subtitle. This was one of the reason why we explicitly set `subtitle.y` in the first place - See fiddle in point number 1. Because if we don't set `subtitle.y` in that fiddle, there is a lot of gap b/w title and subtitle - See https://jsfiddle.net/mcy5q3tv/1/.

Hence, we are stuck b/w too much gap b/w title-subtitle and non-flexibility of subtitle. This was raised as a critical issue by our stakeholders few days ago.

May be if there is an option which sets gap b/w title (or title's last line in case of multi-line title) and subtitle; and keeping the flexibility of subtitle shifting upon width change; but keeping the gap b/w title and subtitle constant.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Set constant gap between title and subtitle

Hello rdp1414!
Thanks for contacting us with your question!

You can set a proper y value to subtitle based on title and some value of gap in callback function in chart.events.load property. Please, check the demo below. If you want this can be controlled by some property from subtitle - let me know if you need help with the implementation of something like this.

Demo: https://jsfiddle.net/BlackLabel/xn83yLqu/
API Reference: https://api.highcharts.com/highcharts/chart.events.load

Let me know if that was what you were looking for!
Kind regards!
Hubert Kozik
Highcharts Developer
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Set constant gap between title and subtitle

Another idea - since we already have the title.margin option that sets the margin between the subtitle and the plotarea, we can simply adjust the vertical position of the subtitle by CSS: https://jsfiddle.net/highcharts/tv6dnbej/
Torstein Hønsi
CTO, Founder
Highsoft

Return to “Highcharts Usage”