How to make rectangular legend in 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>