Pie do Highchart

Question

My question is how to change the markers of the highchart pie (in the legend) from rectangles to circles and how to group my caption 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]);;
                });
        });

Presenting this screen to visualize where I have my doubts.

EDIT:

I also present a fiddle to help you understand better.

Answer 1

To make the rectangles in circles just add this in the parameter 'Legend' [Example]:

symbolWidth: 12,
symbolRadius: 6,

And to group elements in the caption there is no way I consider elegant, but Voce can use useHTML as true and use labelFormatter to achieve a reasonable result [Example]:

labelFormatter: function () {

        if (this.x == 0) return '<h2>Título grupo 1</h2>' + this.name;
        else if (this.x == 2) return '<div class="segundo"><h2>Título grupo 2</h2>' + this.name + '</div>';
        else return this.name;

    },