Highcharts - How to deploy data labels & tooltips for 2nd data series - highcharts

Question

I've created a Highcharts that is a bit unusual. It's placing two series in the same plotarea, but instead of them "lining up" and sharing the entire plot area, series0 is using the left side of the area and series1 is using the right side. Everything is working great except for two (related) things: I cannot get tooltips or datalabels to display for the series1 data on the right-hand side of the page. Completely guessing here, but I'm guessing the series are not being shared because they are not lining up together.
I've spent the past day trying various things and have completely ran out of ideas. Hoping a fresh set of eyes might spot something that will work. Attached is a fiddle for your viewing pleasure...
https://jsfiddle.net/wk0uh72o/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="adaRate"></div>
$(function() {
var options = {
chart: {
renderTo: 'adaRate',
type: 'bar',
width: 600,
height: 400
},
title: {
text: 'Average Daily Attendance Rate',
align: 'center',
style: {
fontWeight: 'bold',
color: 'rgba(0,0,0,.9)'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true,
formatter: function() {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function() {
s += '<br/>' + this.series.name + ': ' +
this.y + '%';
});
return s;
},
},
xAxis: {
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: [{
min: 0,
max: 100,
opposite: true,
width: 270,
title: {
text: 'Average Daily Attendance %'
}
}, {
min: -10,
max: 10,
offset: 0,
opposite: true,
plotLines: [{
color: 'red',
value: 0,
width: 2
}],
left: 400,
width: 170,
title: {
text: 'Variance from Prior Year'
}
}],
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
}],
credits: {
enabled: false
}
};
var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"];
var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9];
var adaVar = [{
"color": "yellow",
"y": -.8
}, {
"color": "red",
"y": -3.5
}, {
"color": "lightgreen",
"y": 1.5
}, {
"color": "lightgreen",
"y": 2.3
}, {
"color": "red",
"y": -4.3
}, {
"color": "green",
"y": 5.3
}, {
"color": "darkgreen",
"y": 7.8
}
];
options.xAxis.categories = categories;
options.series[0].data = adaRate;
options.series[1].data = adaVar;
var chart = new Highcharts.Chart(options);
});

Answer 1

I don't have time to write a longer answer. But, shared tooltips don't work for unordered data (pie, scatter, flag). See http://api.highcharts.com/highcharts#tooltip.shared
You can simulate a scatter series using a line series with lineWidth of 0. You also have to modify the mouseOver event to not increase the lineWidth on hover.

Answer 2

Just need to remove tooltip on the top level. But set it in each series separately.
series: [{
name: 'ADA',
dataLabels: {
enabled: true,
align: 'right',
color: '#FFFFFF',
x: -10
},
yAxis: 0,
tooltip: {
pointFormat: 'First {point.y}'
}
}, {
type: 'scatter',
name: 'PY Variance',
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
x: -10
},
yAxis: 1,
tooltip: {
pointFormat: 'Second {point.y}'
}
}],
refer to fiddle I updated from yours.