score:0

js

const graphsubtitles = `
        <span class="subtitle1">${subtitle1}</span>
        <span class="subtitle2">${subtitle2}</span>
    `;
const config = {
            title: {
                align: 'low',
                text: 'title',
            },
            subtitle: {
                align: 'low',
                usehtml: true,
                text: graphsubtitles,
                textalign: 'left',
            },
            ...
};
highcharts.chart('container', config);

css

subtitle1 {
   color: red;
}
subtitle2 {
   color: blue;
}

score:1

it looks like a bug so i've reported it here: https://github.com/highslide-software/highcharts.com/issues/1704

score:1

you can break the line in the subtitle with a normal br-html-tag. than you can set the title margin depending if you break the line or not.

score:2

i'm not sure there is a built-in feature for having multiple subtitles, but i guess it should not be a lot of work to use for instance jquery to "manually" put a div with your second subtitle on top of the chart, wherever you want it to be. you would then need to use relative or absolute positioning in css and make sure it has a z-index that is high enough to make it visible.

here you can read more about how to position html elements: http://www.w3schools.com/css/css_positioning.asp

score:2

a little late for this answer, but i hope this can help others.

i had a similar problem and i ended up using the renderer.text function from highcharts to add a bunch of random text all over the place.

http://api.highcharts.com/highcharts#renderer.text

fiddle here: http://jsfiddle.net/flacoman91/bvjaq/

it's a bit tedious to move the text around, but it'll get the job done.

code here

$(function () {
$('#container').highcharts({

    xaxis: {
        categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function(chart) { // on complete
 var middle = chart.plotsizex - 100;
    chart.renderer.text('series 1', chart.plotsizex / 2, 150)
        .attr({

        })
        .css({
            color: '#4572a7',
            fontsize: '16px'
        })
        .add();
    chart.renderer.text('subtitle 2', chart.plotsizex / 2, 300)
        .attr({

        })
        .css({
            color: '#4572a7',
            fontsize: '16px'
        })
        .add();

});


});

score:3

why not just put a line break into the subtitle?

subtitle: {
    text: 'line 1 of the subtitle<br>line 2 of the subtitle' 
},

Related Query

More Query from same tag