I want to make chart with dual axis breakpoint and drag that point as you can in below images.[![enter image description here](https://i.stack.imgur.com/UXni0.jpg)](https://i.stack.imgur.com/UXni0.jpg)

Can someone please let me know how can I do this?
I explored highchart but could not find appropriate options to create this.
Is there any other options?

```js
var seriesOptions = [],
    names = ['MSFT'];
$(document).ready(function(e) {
     // Start the standard Highcharts setup
    $.each(names, function(i, name) {
        seriesOptions[i] = {
            data: [0,20, 40, 60]
        };
        createChart();
    });
});

// create the chart when all data is loaded
function createChart() {
    $('#container').highcharts('StockChart', {
        chart: {
            backgroundColor: "#40aa98"
        },
        credits: {enabled: false},
        rangeSelector: {enabled: false},
        navigator: { enabled: false},
        scrollbar: {enabled: false},
        yAxis: {
            min:0,
            max:60,
            labels: {
                align: 'right',
                formatter: function() {
                    return  '$' + this.value + 'k';
                },
                x:-5,
                y:-2
            },
            opposite:false,
            gridLineWidth: 0,
            gridZIndex: 0,
            minorGridLineColor: "#fff",
            minorGridLineWidth: 2,
            minorTickColor: "#fff",
            plotLines: [{
                value: 20,
                width:3,
                color: '#fff'
            }]
        },
        xAxis: {
            min:0,
            max:60,
            crosshair: {
                color: '#006753',
                dashStyle: "Solid",
                snap: true,
                width:4,
                zIndex: 2,
            }
        },
        legend: {
            enabled: true,
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            y: 10,
            labelFormat: '<span style="color:#fff">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>',
            borderWidth: 0
        },
        plotOptions: {
            series:{
                marker:{
                    enabled: false,
                    fillColor: '#ef188d',
                    width: 20,
                    radius: 10,
                    height: 20,
                    lineColor: "#006753",
                    lineWidth: 2

                },

            }
        },

        series: seriesOptions
    });
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://rawgithub.com/highslide-software/value-in-legend/master/value-in-legend.js"></script>
<div id="container" style="height: 400px; width: 600px; margin:auto"></div>
```

I tried this and still find some help.