extra tooltip for displaying yAxis values on right side

Question

I want an extra tooltip in my highchart which will display yAxis value. These tooltips which I am talking about you have seen in many ohlc charts. For demonstration purpose, I've made it using paint tool.

If you see on the right side, along with the main tooltip, there's another tooltip which is showing the yAxis value. How can we make the same in highcharts. I am having following code.

Highcharts.chart('container', {
    title: {
        text: 'Non-snapped crosshair'
    },
    xAxis: {
        crosshair: {
            snap: false
        }
    },
    yAxis: {
        crosshair: {
            snap: false
        },
        opposite: true
    },
    tooltip: {
        borderWidth: 1,
        shape: 'rect',
        positioner: function () {
            return { x: 0, y: 0 };
        },
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

Note: For having crosshair which follows mouse pointer, I am setting snap property of crosshair in both the axis to false.

Answer 1

You can use highstock source code and the label property for crosshair:

yAxis: {
    crosshair: {
        snap: false,
        label: {
            enabled: true,
            format: '{value:.2f}'
        }
    },
    ...
},

Live demo: https://jsfiddle.net/BlackLabel/yz4b6cus/

API Reference: https://api.highcharts.com/highstock/xAxis.crosshair.label