如何在highcharts中制作矩形图例？

Question

Could you please tell me how to make rectangular legend in highcharts?

Currently in my demo legend is circular or circle . Here is my code http://jsfiddle.net/oupmgvjy/12/

I want to make like this as show in image:

$(function() {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },

        credits: {
            enabled: false
        },
        exporting: { enabled: false },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'vertical',
            x: 0,
            y: 100,
                labelFormatter: function() {

                    return '<span style="color:' + this.color + ';background:red!important">' + this.name + ':</span> <b>' + this.y + '</b> </n>';
            }
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
               series: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
            },
                allowPointSelect: false,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    format: '<b>{point.y}</b>',

                    style: {
                        fontWeight: 'bold',
                        color: 'white'
                    }
                },

                startAngle: 0,
                endAngle: 270,
                center: ['50%', '75%']
            }
        },
        tooltip: {
            enabled: false,
            shadow: false
        },
        series: [{
         states: {hover: {enabled: false}},
          showInLegend: false,
            name: 'election result',
            enabled: true,
               dataLabels: {
                   enabled: true
                },
            data: [
                ['A', 55],
                ['B', 65],

            ],
            size: '30%',
            innerSize: '70%',
        }, {
        states: {hover: {enabled: false}},
            name: 'Versions',
            data: [
                ['sdsd', 55],
                ['sdf', 65],
                ['sdf', 65],
                ['sdf', 132],

            ],
            size: '70%',
            innerSize: '80%',
        }]
    });
});

Answer 1

Try with useHTML and labelFormatter

      legend: {

        symbolHeight: 1,
        symbolWidth: 1,
        symbolRadius: 0,
        useHTML:true,
        align: 'right',
        verticalAlign: 'top',
        itemWidth:100,
        layout: 'vertical',
        x: 0,
        y: 100,
        labelFormatter: function() {

                return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
        }
    }

fiddle : http://jsfiddle.net/qhq2ctqr/

 $(function() { $('#container').highcharts({ chart: { type: 'pie' }, credits: { enabled: false }, exporting: { enabled: false }, legend: { symbolHeight: 1, symbolWidth: 1, symbolRadius: 0, useHTML:true, align: 'right', verticalAlign: 'top', itemWidth:100, layout: 'vertical', x: 0, y: 100, labelFormatter: function() { return '<div style="padding:10px;width:55px;background-color:'+this.color+'"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>'; } }, yAxis: { title: { text: 'Total percent market share' } }, plotOptions: { pie: { series: { states: { hover: { enabled: false } } }, allowPointSelect: false, cursor: 'pointer', showInLegend: true, dataLabels: { format: '<b>{point.y}</b>', style: { fontWeight: 'bold', color: 'white' } }, startAngle: 0, endAngle: 270, center: ['50%', '75%'] } }, tooltip: { enabled: false, shadow: false }, series: [{ states: {hover: {enabled: false}}, showInLegend: false, name: 'election result', enabled: true, dataLabels: { enabled: true }, data: [ ['A', 55], ['B', 65], ], size: '30%', innerSize: '70%', }, { states: {hover: {enabled: false}}, name: 'Versions', data: [ ['sdsd', 55], ['sdf', 65], ['sdf', 65], ['sdf', 132], ], size: '70%', innerSize: '80%', }] }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0px auto"></div>