Highcharts capture selection

Question

I have a high chart on my web page which is a line chart. It has a functionality to zoom and I capture the zoom event using chart.events.selection. That all is working fine.

But I want to continuously capture the selection event (i.e. basically click and drag event) to show a tooltip in the beginning and end of the selection to show the time user has selected. Couldn't find in high charts documentation. Any help would be appreciated.

Here is my current code to capture selection event:

$(obj.id).highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor:"rgba(0,0,0,0)",
            zoomType:"x",
            events: {
                    selection: function(event){

                        if(!event.xAxis)
                            return;

                        .....

Answer 1

Updated:

Updated example in which labels following selection marker: http://jsfiddle.net/pq0wn0xx/2/

I do not think there is a drag event (not for points), but you can wrap drag pointer's method.

Highcharts.wrap(Highcharts.Pointer.prototype, 'drag', function (p, e) {
    p.call(this, e);

    var H = Highcharts,
        chart = this.chart,
        selectionMarker = this.selectionMarker,
        bBox,
        xAxis,

        labelLeft,
        labelRight,
        labelY,
        attr,
        css,

        timerLeft,
        timerRight;

    if (selectionMarker) {
         if (!chart.customLabels) {
            chart.customLabels = [];
        }

        bBox = selectionMarker.getBBox();
        xAxis = chart.xAxis[0];
        labelLeft = chart.customLabels[0];
        labelRight = chart.customLabels[1];
        labelY = chart.plotTop + 10;

        if (!labelLeft || !labelRight) {
            attr = {
                fill: Highcharts.getOptions().colors[0],
                padding: 10,
                r: 5,
                zIndex: 8
            };

            css = {
                color: '#FFFFFF'
            };

            labelLeft = chart.renderer.label('', 0, 0).attr(attr).css(css).add();
            labelRight = chart.renderer.label('', 0, 0).attr(attr).css(css).add();

            chart.customLabels.push(labelLeft, labelRight);
        }

        clearTimeout(timerLeft);
        clearTimeout(timerRight);

        labelLeft.attr({
            x: bBox.x - labelLeft.getBBox().width,
            y: labelY,
            text: 'min: ' + H.numberFormat(xAxis.toValue(bBox.x), 2),
            opacity: 1
            });

        labelRight.attr({
            x: bBox.x + bBox.width,
            y: labelY,
            text: 'max: ' + H.numberFormat(xAxis.toValue(bBox.x + bBox.width), 2),
            opacity: 1
            });

        timerLeft = setTimeout(function () {
            labelLeft.fadeOut();
        }, 3000);

        timerRight = setTimeout(function () {
            labelRight.fadeOut();
        }, 3000);

    }
});

Old answer:

The example from the official API can be extended to what you need.

The code and the example on jsfiddle are below:

function positionLabels(e, chart) {
    if (!chart.customLabels) {
        chart.customLabels = [];
    }

    var labelLeft,
        labelRight,
        attr,
        css,

        xAxis,
        xMin,
        xMax,
        yAxis,
        yMin,
        yMax,
        yMiddle,
        timerLeft,
        timerRight;

    if (!e.resetSelection) {
        labelLeft = chart.customLabels[0];
        labelRight = chart.customLabels[1];

        if (!labelLeft || !labelRight) {
            attr = {
                fill: Highcharts.getOptions().colors[0],
                padding: 10,
                r: 5,
                zIndex: 8
            };

            css = {
                color: '#FFFFFF'
            };

            labelLeft = chart.renderer.label('', 0, 0).attr(attr).css(css).add();
            labelRight = chart.renderer.label('', 0, 0).attr(attr).css(css).add();

            chart.customLabels.push(labelLeft, labelRight);
        }

        clearTimeout(timerLeft);
        clearTimeout(timerRight);

        xAxis = e.xAxis[0].axis;
        xMin = e.xAxis[0].min;
        xMax = e.xAxis[0].max;

        yAxis = chart.yAxis[0];
        yMin = yAxis.min;
        yMax = yAxis.max;
        yMiddle = (yMax - yMin) * 0.95;

        labelLeft.attr({
            x: xAxis.toPixels(xMin) - labelLeft.getBBox().width,
            y: yAxis.toPixels(yMiddle),
            text: 'min: ' + Highcharts.numberFormat(xMin, 2),
            opacity: 1
        });

        labelRight.attr({
            x: xAxis.toPixels(xMax),
            y: yAxis.toPixels(yMiddle),
            text: 'max: ' + Highcharts.numberFormat(xMax, 2),
            opacity: 1
        });

        timerLeft = setTimeout(function () {
            labelLeft.fadeOut();
        }, 2000);

        timerRight = setTimeout(function () {
            labelRight.fadeOut();
        }, 2000);
    }
}

example: http://jsfiddle.net/pq0wn0xx/