Pierce Butler Pierce Butler - 5 months ago 18
Javascript Question

Highchart pie legend circles

Im using a highchart pie chart to create a donut chart but would like the legend icons to be circles any ideas??? Below is the mockup and the actual web version. Thanks...

enter image description here

Answer

I prepared solution based on pie chart. Legend is generated on data points, automatically as HTML list. Then all elements gets colors from series, and use CSS3 to generate circle object (border-radius). As a result you need to add click event.

http://jsfiddle.net/N3KAC/1/

 $legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

    $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });  

CSS:

    .symbol {
    width:20px;
    height:20px;
    margin-right:20px;
    float:left;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.serieName {
    float:left;
    cursor:pointer;
}

.item {
    height:40px;
    clear:both;
}