Is it possible to have a distinct legend for each yAxis when they are split in highstock? I am using a stacked bar chart with the same data series running on both yAxes, resulting in duplicated entries in the legend at the top. Can the legend be divided into two sections, with the second one placed lower down above the second yAxis?
If anyone can provide guidance on the configuration below, I would greatly appreciate it. I have included a screenshot so you can see how it currently appears. I would like the second green 'direct consumption' + 'Charge' + 'export' on the lower legend.
https://i.sstatic.net/0M3UL.png
// 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%',
lineWidth: 2,
stackLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.total,2);
},
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,
stackLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.total,2);
},
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
}],
tooltip: {
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) %>
}]
});