I migrated from version 2 to 4. The graph does not draw lines to points that are outside the graph. I use the plugin chartjs-plugin-zoom.
I am using spanGaps for to link points. But points outside the graph does not work.
you see old version and new version on video - https://cloud.mail.ru/public/pxTm/6sb3fxmnt
I could not search answer for it issue.
version 2 - is working
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red2', 'Blue2', 'Yellow2', 'Green2', 'Purple2', 'Orange2', 'Red3', 'Blue3', 'Yellow3', 'Green3', 'Purple3', 'Orange3', 'Red4', 'Blue4', 'Yellow4', 'Green4', 'Purple4', 'Orange4', 'Red5', 'Blue5', 'Yellow5', 'Green5', 'Purple5', 'Orange5', 'Red6', 'Blue6', 'Yellow6', 'Green6', 'Purple6', 'Orange6', 'Red7', 'Blue7', 'Yellow7', 'Green7', 'Purple7', 'Orange7'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3, 12, 19, null, null, null, null, null, null, null, null, 2, 3, 12, 19, 3, null, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
spanGaps: true,
elements: {
line: {
tension: 0.3,
fill: false,
}
},
scales: {
yAxes: [{
beginAtZero: true,
ticks: {
min: 0,
max: 20
}
}],
xAxes: [{
ticks: {
min: 'Yellow3',
max: 'Orange7'
}
}]
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
speed: 5
},
zoom: {
enabled: true,
mode: 'x',
scaleMode: 'x',
wheel: {
enabled: true
},
sensitivity: 0.1
}
}
}
}
});
</script>
</body>
</html>
version 4 (3 too) - is not working
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Red2', 'Blue2', 'Yellow2', 'Green2', 'Purple2', 'Orange2', 'Red3', 'Blue3', 'Yellow3', 'Green3', 'Purple3', 'Orange3', 'Red4', 'Blue4', 'Yellow4', 'Green4', 'Purple4', 'Orange4', 'Red5', 'Blue5', 'Yellow5', 'Green5', 'Purple5', 'Orange5', 'Red6', 'Blue6', 'Yellow6', 'Green6', 'Purple6', 'Orange6', 'Red7', 'Blue7', 'Yellow7', 'Green7', 'Purple7', 'Orange7'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3, 12, 19, null, null, null, null, null, null, null, null, 2, 3, 12, 19, 3, null, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3, 12, null, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
spanGaps: true,
elements: {
line: {
tension: 0.3,
}
},
scales: {
y: {
beginAtZero: true,
min: 0,
max: 20
},
x: {
// type: 'linear',
min: 'Yellow3',
max: 'Orange7'
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
speed: 5
},
zoom: {
enabled: true,
mode: 'x',
scaleMode: 'x',
wheel: {
enabled: true
},
sensitivity: 0.1
}
}
}
}
});
</script>
</body>
</html>
