CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
Anton Plotnikov
Anton Plotnikov

Reputation: 45

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?

Upvotes: 4

Views: 1453

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

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/

Upvotes: 4

Related Questions