[Solved]-Highchart react - x axis draggable-Highcharts

First of all, you need to create or find some element that will be used as a hook. Next, use mousemove to translate the axis and do a cleanup in mouseup event callback. For example:

const chart = Highcharts.chart('container', {...});

chart.customLine = chart.renderer.path([
        'M',
        chart.plotLeft,
        chart.plotTop,
        'L',
        chart.plotLeft,
        chart.plotTop + chart.plotHeight
    ]).attr({
        stroke: '#ff00ff',
        'stroke-width': 7
    })
    .on('mousedown', function() {
        chart.isDraggingAxis = true;
    })
    .add();

chart.container.addEventListener('mousemove', function(e) {
    if (chart.isDraggingAxis) {
        const yAxis = chart.yAxis[0];

        chart.customLine.translate(e.x - chart.plotLeft);
        yAxis.labelGroup.translate(e.x - chart.plotLeft);
    }
});

document.addEventListener('mouseup', function(e) {
    if (chart.isDraggingAxis) {
        chart.isDraggingAxis = false;
    }
});

Live demo: http://jsfiddle.net/BlackLabel/jervfkoc/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate