Круги легенды пирога Highchart

Я подготовил решение на основе круговой диаграммы. Легенда генерируется по точкам данных автоматически в виде списка HTML. Затем все элементы получают цвета из серии и используют CSS3 для создания объекта круга (граница-радиус). В результате вам нужно добавить событие клика.

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

В последних версиях Highcharts вы можете использовать symbolWidth: width и symbolRadius: width/2 внутри legend: {}.

Посмотрите эту демонстрацию JSFiddle: http://jsfiddle.net/Wzs9L/

Другим способом добиться этого может быть переопределение стиля с помощью CSS. Просто добавьте класс ниже в таблицу стилей:

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

и это заменит стиль по умолчанию для элемента SVG Rectangle.

Есть довольно простое решение. Просто установите следующие свойства в chartoptions:

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

Дополнительные сведения см. в документации по API highcharts.

Проверьте это jsFiddle.