My question is how to change the highchart pie markers (in the legend) from rectangles to circles and how to group my legend by category, I show the code below:
var categories = ['Product', 'Competition'],
data = {
Product: {
name: 'Product',
size:'100%',
innerSize: '85%',
data: [{ name: "Product", y: 851.8, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
{ name: "Product", y: 554.2, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
{ name: "Product", y: 487.6, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
{ name: "Product", y: 375.3, color: colors[4], category: 'Outdoor', marker: { symbol: 'circle' } },
{ name: "Product", y: 298, color: colors[5], category: 'Cinema', marker: { symbol: 'circle' } },
{ name: "Product", y: 653.2, color: colors[6], category: 'Internet', marker: { symbol: 'circle' } }],
dataLabels: { enabled: false },
marker: { symbol: 'circle' }
},
Competition: {
name: 'Competition',
size:'75%',
innerSize: '90%',
data: [{ name: "Competition", y: 710.2, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
{ name: "Competition", y: 0, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
{ name: "Competition", y: 9.2, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
{ name: "Competition", y: 0, color: colors[4], category: 'Outdoor', marker: { symbol: 'circle' } },
{ name: "Competition", y: 0, color: colors[5], category: 'Cinema', marker: { symbol: 'circle' } },
{ name: "Competition", y: 0, color: colors[6], category: 'Internet', marker: { symbol: 'circle' } }],
color: [colors[1], colors[2], colors[3], colors[4], colors[5], colors[6]],
dataLabels: { enabled: false },
marker: {symbol:'circle'}
},
},
ProductData = [],
CompetitionData = [],
PointFormatToolTipProduct, PointFormatToolTipCompetition;
$("#DonuTchartIBV-MMS-1").highcharts({
chart: {
type: 'pie'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 500,
verticalAlign: 'middle',
useHTML: true,
marker:{ symbol: 'circle'},
labelFormatter: function () {
return '<div style="width:200px"><span style="float:left">' + this.category + '</span><span class="number-piechart" style="float:right">' + this.y + 'K</span></div>';
}
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF {point.category}: {point.y} K</span><br/>'
},
credits: { enabled: false },
title: { text: null },
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%'],
borderColor: 'transparent',
cursor: 'pointer',
showInLegend: true,
marker: { symbol: 'circle' }
},
series: {
marker: {
enabled: true,
symbol: 'circle'
}
}
},
series: [
data.Product
,
data.Competition
]
},
function(chart) { // on complete
var textX = chart.plotLeft + (chart.plotWidth * 0.5 + 10);
var textY = chart.plotTop + (chart.plotHeight * 0.5);
var idNumber = $('.number-piechart');
var publish = [];
var total = 0;
idNumber.each(function (i,e) {
publish.push($(e).text().replace('K', ''));
total += parseFloat(publish);
});
var result = Number(total).toFixed(2);
var span = '<div id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 15px; color:' + colors[1] + '; vertical-align:middle;">\u25CF</span><span style="font-size: 30px; vertical-align:middle; color:'+ colors[1] +'">' + result + 'K</span><br>';
span += '<span style="font-size: 7px; color:' + colors[1] + '; vertical-align:middle;">\u25CF</span><span style="font-size: 15px; vertical-align:middle; color:' + colors[1] + '">' + result + 'K</span>';
span += '</div>';
$("#DonuTchartIBV-MMS-1").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5)),
('color', colors[2]);
span.css('top', textY + (span.height() * -0.5 +10)),
('color', colors[2]);;
});
});
Introduce this screen to view where I have my questions.
EDIT:
I also introduce a fiddle to help me understand better.