BrokenAxis and minorGridLines
by maritavindedal
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<div id="container"></div>
CSS
/*#container {
height: 700px;
width: 1000px;
}*/
JavaScript
Highcharts.chart('container', {
chart: {
type: 'line',
panning: true
},
xAxis: [{
type: 'datetime',
ordinal: false,
opposite: false,
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0,
tickPosition: 'inside',
gridLineWidth: 1,
gridLineColor: '#C0C0C0',
gridLineDashStyle: "Solid",
minorGridLineColor: '#C0C0C0',
minorGridLineWidth: 1,
minorGridLineDashStyle: "Dot",
minorTickInterval: 40,
labels: {
enabled: false,
},
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,
...