How to render a vertical line when the mouse cursor is on the chart using highcharts?

I have been working on a web application which used Highcharts for charting data. As such, one of the requirement is that when I hover my mouse on the chart (screenshot below – assuming the arrow is the mouse cursor), a vertical line will automatically display of where the mouse cursor was. Aside from that, the vertical line will also move along the x-axis as the mouse cursor moves sideways within the chart.

This is the sample chart.

This is my highchart configuration script:

    function plotChartData(dataseries, xtitle)
{
    myChart = new Highcharts.Chart({
        chart: {
            renderTo: 'trendspace',
            type: 'line',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            plotBorderWidth: 1
        },
        title: {
            text: ''
        },
        legend: {
            layout: 'horizontal',
            align: 'left',
            itemDistance: 10,
            borderWidth: 0,
            itemMarginTop: 0,
            itemMarginBottom: 0,
            padding: 20
        },
        plotOptions: {
            series: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false,
                    format: '{y}'
                },
                allowPointSelect: false
            }
        },
        xAxis: {
            type: 'datetime',
            labels: {
                rotation: -65,
                style: {
                    fontSize: '9px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            gridLineColor: '#DDDDDD',
            gridLineWidth: 0.5
        },
        series: [{
            name: xtitle,
            data: dataseries,
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b><br/>',
                valueDecimals: 2
            }
        }]
    });
}

I browsed through the Highcharts API and I can’t find the exact method or configuration to make that happen. Is this doable in Highchart? How can I achieve this?

Answer

Try setting your tooltip crosshairs

tooltip: {
    crosshairs: [true]
}

Or as @IronGeek wrote, use xAxis.CrossHairs

Advertisement

Answer