CODEWITHSUNDEEP
javascripthighcharts
BPS
BPS

Reputation: 1678

Highstock title and subtitle overlap

I've got the following in my highcharts options:

subtitle : {
    text : 'Source: WindLogics',
    x : -20
},
title : {
    text : 'Loading',
    x : -20
},

Most of the time, this looks the way I expect with the Title above the Subtitle above the chart.

However, I have two charts on the page with only one displayed at a time. Sometimes when the chart comes into view, it is rendered as shown below with the Title and Subtitle on top of each other and both are within the chart rather than above it.

I am calling setText and redraw while the chart container has display = none.

Looks like this:

title and subtitle munged into chart

I'm using highstock 1.3.9 (highcharts 3.0.9).

Upvotes: 1

Views: 962

Answers (2)

BPS
BPS

Reputation: 1678

I am not using 'useHTML' but my problem seems otherwise to be the same that is reported here.

For me, the fix was to use the cloneRenderTo method.

chart.cloneRenderTo(); // https://github.com/highslide-software/highcharts.com/issues/2267
chart.setTitle({
    text : 'Title',
    x : -20
}, false);
chart.redraw();
chart.cloneRenderTo(true);

For some reason, I needed to call redraw separately from the setTitle otherwise a resize browser event was required before the chart data would display.

Thanks to Pawel Fus for the pointer!

Upvotes: 1

Pim Verlangen
Pim Verlangen

Reputation: 387

If you want to style the title/subtitle, put them in a <div>.

subtitle : {
    text : '<div id="subtitle">Source: WindLogics</div>',
    x : -20
},
title : {
    text : '<div id="title">Loading</div>',
    x : -20
},

You can then style the titles to your likings (including margins, padding etc.).

Upvotes: 0

Related Questions