Anton  Plotnikov Anton Plotnikov - 1 year ago 170
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: {
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:


And what I need:


Does anybody know how to achieve this?

Answer Source

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.