Highcharts legend alignments

I am working on High charts, I have 开发者_开发技巧the requirement to display the legend in a different style, I tried 5 days without any help.

LegendText1  LegendSymbol(box)  Legendtext2 

Please let me know if anybody can help me on this.

---

You can use custom legend for your chart. Disable the default legend for chart in the config. Create the markup for legend items as per your requirement and attach click events for those items. Basically on legend click the series visiblility is toggeld which can be easily achieveed as below.

$("legentItemSelector").click(function () {
                            $(this).toggleClass('disabled-legend-item');
                            var objSeries = chartObject.series[0];
                            objSeries.visible ? objSeries.hide() : objSeries.show();
                        });

---

$(function () {
    var chart;

    $(document).ready(function () {

        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            }, 
             legend: {
                  layout: 'vertical',
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            x: 10,
            y: 10,
            symbolPadding: 20,
            symbolWidth: 10
        },

            title: {
                text: 'Browser market shares at a specific website, 2010'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        });
    });

});