Highstock double yAxis - can the legend be split?

Question

can you have a separate legend for each yAxis when they are split in highstock? I'm using a stacked bar chart with the same data series running on both yAxes and this is duplicated in the legend at the top which isn't ideal - can the legend be split in two with the second one placed lower down above the second yAxis?

If anyone can advise on the config below please I would be really grateful - i've attached a screengrab so you can see how it currently looks - i'd like the 2nd green 'direct consumption' + 'Charge' + 'export' on the lower legend. Many thanks.

// Highstock split stacked column chart
    Highstock.setOptions({
      colors: ['#FB654B', '#FFBE6B', '#2FC099', '#2FC099', '#FF8954', '#FCEA6E']
    });

    Highstock.stockChart('container2', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Energy Balance History'
      },
      xAxis: {
      type: 'datetime'
      },
      legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        enabled: true,
        x: 0,
        y: 50
      },
      navigator: {
        height: 30,
        series: {
            data: <%- JSON.stringify(solarValuesDays)  %>
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'week',
          count: 2,
          text: '2w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'all',
          text: 'All'
        }],
        inputEnabled: true, // it supports only days
        selected: 1 // month
      },
      yAxis: [{
        labels: {
          align: 'right',
          x: -3
        },
        min: 0,
        title: {
          text: 'Consumption Energy (kWh)'
        },
        height: '50%',
        // linkedTo: 1,
        lineWidth: 2,
        stackLabels: {
          enabled: true,
          formatter: function () {
            return Highcharts.numberFormat(this.total,2);
          },
          // allowOverlap: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },{
      labels: {
        align: 'right',
        x: -3
      },    
      min: 0,
      title: {
        text: 'Generation Energy (kWh)'
      },
      top: '53%',
      height: '50%',
      linkedTo: 0,
      lineWidth: 2,
      offset: 0,
      // linkedTo: 0,
      stackLabels: {
        enabled: true,
        formatter: function () {
          return Highcharts.numberFormat(this.total,2);
        },
        // allowOverlap: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
      }],
      tooltip: {
        // headerFormat: '<b>Consumption Total: {point.stackTotal}</b><br/><b>Generation Total: {point.stackTotal[1]}</b><br/>',
        pointFormat: '{series.name}: {point.y:.2f}'
      },
      plotOptions: {
        column: {
          stacking: 'normal'
        }
      },
      series: [{
      name: 'Import',
      yAxis: 0,
      data: <%= JSON.stringify(importValuesDays) %>
      }, {
      name: 'Discharge',
      yAxis: 0,
      data: <%=JSON.stringify(dischargeValuesDays)  %>,
      }, {
      name: 'Direct Consumption',
      yAxis: 0,
      data: <%= JSON.stringify(dirConsumptionValuesDays)  %>
      }, {
      name: 'Direct Consumption',
      yAxis: 1,
      data: <%= JSON.stringify(dirConsumptionValuesDays)  %>
      }, {
      name: 'Charge',
      yAxis: 1,
      data: <%=JSON.stringify(chargeValuesDays)  %>
      }, {
      name: 'Export',
      yAxis: 1,
      data: <%= JSON.stringify(exportValuesDays) %>
      }]
    });

Answer 1

By default legend can not be splitted, but you can use custom code to reposition legend items:

var H = Highcharts;

H.wrap(H.Legend.prototype, 'positionItems', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var items = this.allItems;

    items.forEach(function(item, i) {

        if (i > 1) {
            item.legendGroup.attr({
                translateY: 215,
                translateX: item.legendGroup.translateX - this.legendWidth / 4
            });
        } else {
            item.legendGroup.attr({
                translateX: item.legendGroup.translateX + this.legendWidth / 4
            });
        }
    }, this);
});

Live demo: https://jsfiddle.net/BlackLabel/dq0wefL3/

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts