Responsive Highchart legend position

Question

Is there a way to have the Highcharts Pie chart to bring down the legend when the screen size is small. Please see attached image for reference.

Here is a sample image when the screen is big.

This would what it looked like when in small screen or small device

Is this possible to achieve? Thanks for your help.

Answer 1

This is an old post, but since I ran into it, it's likely that someone else will at some point. I found out that since Highcharts 5 you can configure options for responsive behavior: https://www.highcharts.com/docs/chart-concepts/responsive, so this is the way to go now.

Here is the config I used to achieve this effect:

{
  chart: {
    type: 'pie',
  },
  legend: {
    layout: 'vertical',
    squareSymbol: false,
    symbolRadius: 0,
  },
  plotOptions: {
    pie:
      showInLegend: true,
    },
  },
  responsive: {
    rules: [{
      condition: {
        minWidth: 700,
      },
      chartOptions: {
        legend: {
          align: 'right',
          verticalAlign: 'top',
        }
      }
    }]
  },
}

Answer 2

Since you are asking for a responsive layout I've made a little fiddle which listens to the resize event and changes to legend attributes accordingly.

Not sure if it will work that well (the legend may need some adjusting in each position) but the spirit is the following:

$(function () {

    $(document).ready(function () {
        $(window).resize(function () {                      
            var chart =  $('#container').highcharts();
            var isBig = chart.chartWidth > 450;
            console.log(chart.chartWidth);
            if (isBig) {
              chart.legend.options.align = "right";
              chart.legend.options.verticalAlign = "middle";
              chart.legend.options.layout = "vertical";
              chart.isDirtyLegend = true;
            } else {
              chart.legend.options.align = "center";
              chart.legend.options.verticalAlign = "bottom";
              chart.legend.options.layout = "horizontal";
              chart.isDirtyLegend = true;                   
            }
        });



        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'                
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            legend: {

            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        });
          $(window).trigger("resize");
    });
});

On each resize the chart width is checked and if it's below a threshold the legend changes position attributes.

When the chart is redrawn (which it would when its container gets smaller) it the legend is drawn correctly.

Example fiddle: https://jsfiddle.net/9xfL6rz1/2/

Answer 3

You could check the window width before creating the chart and using that information to set the alignment of the legend. For example (JSFiddle):

var isBig = $(window).width() > 700;

var legendBig = {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
};

var legendSmall = {
    align: 'center',
    verticalAlign: 'bottom',
    layout: 'horizontal'
}

$('#container').highcharts({
    legend: isBig? legendBig : legendSmall,
    // ...
});