highcharts customize legend for different series

Question

I have 2 pie charts and each have 2 legends. i want to position 2 on right and 2 on left..how would i do that ?

I tried to add legend in a series rather than chart...but it did not work...

chart.addSeries({
    name: data.series[i].name,
    data: data.series[i].data,
    type: data.series[i].type,
    showInLegend: true,
    legend: {
        enabled: true,
        floating: true,
        verticalAlign: 'bottom',
        align:'right',
        y:100,
        itemStyle: {
            textDecoration: 'underline'
        }
    },
    }
});

any clues or guidelines would be appreciated...

Thanks

Answer 1

From what I know, each chart can only have one legend, and that needs to be configured using the "legend" attribute for the entire chart, not per series.

I would suggest using the renderer methods ( http://api.highcharts.com/highcharts#Renderer ) to display a fixed, HTML-style legend, or use HTML/CSS to create a legend (which would technically live outside the chart) where the items are clickable.

Here is an example I created with a custom legend: https://www.frbatlanta.org/chcs/labor-market-distributions.aspx (see the parts with the checkboxes and drop-down menus). It is easy enough to create a click event from your custom legend to show/hide the associated series.

I'll be glad to edit a fiddle, if you provide one.