CODEWITHSUNDEEP
jqueryjquery-uihighcharts
ramesh
ramesh

Reputation: 63

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.

Upvotes: 1

Views: 2532

Answers (2)

BackiaSenthil
BackiaSenthil

Reputation: 21

$(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]
                ]
            }]
        });
    });

});

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

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();
                        });

Upvotes: 3

Related Questions