Creating series/group titles in legend in Highcharts JavaScript pie chart

Question

I have a set of data that I'm representing as a pie chart using HighCharts.

I am trying to break out the labels in the legend into two distinct groups, and give them headers. Just for legend display purposes, no change to the chart itself.

I tried to use labelFormatter to insert the group titles, but without success. I also tried the linkedTo property which does not seem to do what I want.

I have a function that I run on chart load, in which I am able to manipulate placement of the legend items, to create separation between the two groups. But I've not been able to add headers.

Has anyone come upon this before with HighCharts and managed a solution?

Here is a fiddle showing what I've been able to accomplish (separation of the two groups, but without titles): http://jsfiddle.net/EacF5/1/

Here is the function I wrote to manually manipulate the legend on chart load:

load: function(){
    var $hc_start = -1;
    $(".highcharts-legend-item").each( function(){
        var t = $(this).find("tspan").text().split( ':' );
        switch ( t[0] ){
            case 'Group 2 Title 1':
            case 'Group 2 Title 2':
                var t = $(this).attr( 'transform' ).split( ',' );
                t[1] = parseInt( t[1].replace( ')', '' ) );
                t[1] = sum(t[1])(15);
                $(this).attr( 'transform', t[0] + ',' + t[1]  + ')' );

                $hc_start = 1;
                break;
            default:
        }
    });
}

Please let me know what further information I can provide to you :) Thanks!

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2013-05-21T13:49:19

You can set useHTML as true, and then add element or use labelformater with css styles. Very simple code;

http://jsfiddle.net/EacF5/2/

labelFormatter: function () {

            if (this.x == 0) return '<h2>Title Group 1</h2>' + this.name;
            else if (this.x == 2) return '<div class="second"><h2>Title Group 2</h2>' + this.name + '</div>';
            else return this.name;

        },

Creating series/group titles in legend in Highcharts JavaScript pie chart

1 Answers