Draw polygons with highcharts - highcharts

Question

I need to draw polygons with highcharts. The thing is that I need exactly one tooltip and a mouseover effect for the whole polygon. To get an idea of what I want to achieve, look at this fiddle.
Highcharts.chart('container', {
chart: {
type: 'column',
zoomType: 'x'
},
xAxis: [{
categories: [
'Jan 17',
'Feb 17',
'Mar 17',
'Apr 17',
'May 17',
'Jun 17',
'Jul 17',
'Aug 17',
'Sep 17',
'Oct 17',
'Nov 17',
'Dec 17'
]
}],
series: [
{
type: 'area',
data: [150,140,140, 140, 150, 150,100, 100,150, 150,150, 150],
color: '#ababab',
step: 'left',
marker: {
enabled: false
}
}]
});
You notice that there is a tooltip for each point. What I want is one tooltip which is displayed at the top-middle position of that figure. And I also need that mouseover effect which you might know from column charts. I guess this is not possible with highcharts default api, is it? Anyone tried to do such things?

Answer 1

Highcharts provides the polygon type of series in which tooltip doesn't follow the boundaries. Using it together with the tooltip.positioner will help you achieve the desired effect:
var chart = Highcharts.chart('container', {
chart: {
type: 'polygon'
},
series: [{
data: [
[1, 3],
[2, 6],
[4, 1]
]
}],
tooltip: {
positioner: function() {
return {
x: 300,
y: 100
}
}
}
});
Live demo: http://jsfiddle.net/kkulig/go9umtfn/
API reference: https://api.highcharts.com/highcharts/tooltip.positioner