Broken Axis

by maritavindedal

HTML

<script src="http://localhost:3030/highcharts.js"></script>
<script src="http://localhost:3030/modules/broken-axis.js"></script>
<div id="container"></div>

CSS

#container {
    height: 700px;
    width: 1000px;
}

JavaScript

(function (H) {
// override dash style to provide a custom dashes
    H.wrap(
        H.SVGElement.prototype,
        'dashstyleSetter',
        function (proceed, value) {
            if (value === 'EgmGrid') {
                this.element
                    .setAttribute(
                        'stroke-dasharray', '0, 3, 1, 3, 1, 3, 1, 3, 1, 4'
                    );
            } else {
                proceed.apply(this, [].slice.call(arguments, 1));
            }
        });
}(Highcharts));

Highcharts.chart('container', {
    chart: {
        type: 'line',
        panning: true
    },
    xAxis: [{
        type: 'datetime',
        minorGridLineColor: '#C0C0C0',
        minorGridLineWidth: 1,
        minorGridLineDashStyle: 'EgmGrid',
        minorTickInterval: 40,
        min: 9500,
        max: 22500,
        breaks: [{
            from: 12000,
            to: 20000,
            breakSize: 200
        }]
    }],
    series: [{
        data: [{
            x: 0,
            y: 1
        }, {
            x: 1000,
            y: 2
        }, {
            x: 2000,
            y: 1
        }, {
            x: 4000,
            y: 1
        }, {
            x: 5000,
            y: 0
        }, {
            x: 6999,
            y: 1
        }, {
            x: 7000,
            y: 1
        }, {
            x: 8000,
            y: 2
        }, {
            x: 9000,
            y: 1
        }, {
            x: 10000,
            y: 1
        }, {
            x: 11000,
            y: 2
        }, {
            x: 12000,
            y: 1
        }]
    }, {
        data: [{
            x: 20000,
            y: 1
        }, {
            x: 21000,
            y: 3
        }, {
            x: 22000,
            y: 2
        }, {
            x: 23000,
            y: 1
        }, {
            x: 24000,
            y: 3
        }, {
            x: 25000,
            y: 1
        }, {
            x: 26000,
            y: 2
        }, {
            x: 27000,
       ...