Anton  Plotnikov Anton Plotnikov - 5 months ago 41
jQuery Question

Highcharts Areaspline - Highlight a column on hover effect

Stuck with the problem of highlighting column of area spline. Didn't find any solutions via Chartjs, and Highcharts didn't help me either. I need to highlight x-axis column, but till the chart curve. In my code, I'm using Crosshair, but it's not exactly what I need.

xAxis: {
allowDecimals:false,
min: 1,
max: 12,
categories: ['', 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', ''],
labels: {
y: -10,
style: {
color: '#66717c',
fontSize: '13px'
}
},
tickWidth: 0,
lineColor: "#fff",
crosshair: {
width: 60,
color: 'rgba(73,168,222,0.5)',
zIndex: 5
}
},
yAxis: {
title: {
text: ''
},
gridLineWidth: '0',
visible: false
}


My result:

Img01

And what I need:

Img02

Does anybody know how to achieve this?

Answer

If you will add another series that will be stacked on top of the real series with percent stacking, then you could use that area fill is partially transparent and place crosshair under series. Fake series should be used as something to cover part of the crosshair that you want to hide.

Example: http://jsfiddle.net/aft9esqr/