break y axis in line chart chart.js - chart.js

Question

I am trying to render a line graph with two datasets
My sample chart
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [9000, 9020, 9010, 9004, 9011, 9040, 9050]
},
{
label: 'My Second dataset',
borderColor: 'rgb(0, 99, 132)',
fill: false,
data: [1000, 1020, 1010, 1004, 1011, 1040, 1050]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
});
</script>
This is how it looks currently current result
This the graph will be easy to read if it has axis break like this
expected result

Answer 1

There is no build in way to do this. The best thing you can do is use a second Y axes and link the second dataset to the other axes.
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
yAxisID: 'first'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
yAxisID: 'second'
}
]
options: {
scales: {
yAxes: [{
id: 'first'
},{
id: 'second'
}]
}
}