3

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

4 Answers 4

6

In recent versions of Highcharts you can use symbolWidth: width and symbolRadius: width/2 inside legend: {}.

See this JSFiddle demonstration: http://jsfiddle.net/Wzs9L/

3
  • So clean and effective. Excellent. Aug 16, 2014 at 13:10
  • @walterpaoli how to change the legend to rectangle from circle it will be helpful if you can provide this. Thanks!
    – Rohitesh
    Sep 6, 2017 at 13:14
  • you could set symbolRadius to 0. Sep 7, 2017 at 15:35
5

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;
}
0
1

Another way to achieve this can be overriding the style using CSS. Simply add class below to your stylesheet:

.highcharts-legend-item rect {
    width: 12px;
    height: 12px; /* height = width */
    rx: 50%;
    ry: 50%;
}

and this would override the default style for the SVG Rectangle element.

0

There's quite an easy fix. Just set the following properties in chartoptions:

chartoptions.legend.symbolHeight = 12;
chartoptions.legend.symbolWidth = 12;
chartoptions.legend.symbolRadius = 6;

For further reference, check highcharts api documentation.

Checkout this jsFiddle.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.