ChartJS - How can I skip certain minutes on the X-Axis - chart.js

Question

I'm using ChartJS to visualize a database (that I have transformed into an array here)
The problem is that I have various time differences between every point.
Current visualization of my data.
My question is, how can I add space on my X axis, based on the time difference between the two data samples? Thanks.
EDIT: I was not very clear about what I wanted to achieve with my question, let me clarify:
I currently have this code:
var worldctx = document.getElementById('worldChart').getContext('2d');
var worldChart = new Chart(worldctx, {
type: 'line',
data: {
labels: worldArrayTime,
datasets: [{
data: worldArrayData,
label: "WORLD",
borderColor: "#3e95ce",
backgroundColor: "#3e95ce",
fill: false
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Taric Ranking'
},
scales:{
xAxes:[{
ticks:{
callback: function(dataLabel,index){
let a = Math.floor(worldArrayData.length/10)
return index % a == 0 ? dataLabel : '';
}
}
}],
yAxes:[{
ticks:{
min: Math.floor(Math.min.apply(Math,worldArrayData)-2),
max: Math.floor(Math.max.apply(Math,worldArrayData)+2)
}
}]
}
}
});
}
It gives me this Chart, but the X axis doesn't match the time spent between each point, how can I make it so that it represents accurately the time on the X axis?

Answer 1

You should define the xAxis as a time cartesian axis. Also you can use property displayFormats according to Display Formats from Chart.js documentation. See Moment.js for the allowed format strings.
To do so, add the following to your xAxis inside the chart options.
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'DD/MM hh:mm'
}
},
...
Please note that Chart.js uses Moment.js for the functionality of the
time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
const worldArray = [{ time: 1583593111036, rank: 665 }, { time: 1583593163490, rank: 665 }, { time: 1583593233697, rank: 665 }, { time: 1583594921644, rank: 666 }, { time: 1583595055581, rank: 665 }, { time: 1583595404573, rank: 665 }, { time: 1583596247042, rank: 665 }, { time: 1583598655437, rank: 666 }, { time: 1583600457443, rank: 667 }, { time: 1583601460665, rank: 668 }, { time: 1583602660570, rank: 665 }, { time: 1583604281776, rank: 668 }, { time: 1583605854175, rank: 669 }, { time: 1583606447275, rank: 668 }, { time: 1583607161055, rank: 667 }, { time: 1583607882093, rank: 666 }, { time: 1583608179707, rank: 667 }, { time: 1583609744777, rank: 668 }, { time: 1583609860652, rank: 669 }, { time: 1583610648775, rank: 670 }, { time: 1583613344874, rank: 671 }, { time: 1583613459587, rank: 672 }];
const worldArrayTime = worldArray.map(o => o.time);
const worldArrayData = worldArray.map(o => o.rank);
var worldctx = document.getElementById('worldChart').getContext('2d');
var worldChart = new Chart(worldctx, {
type: 'line',
data: {
labels: worldArrayTime,
datasets: [{
data: worldArrayData,
label: "WORLD",
borderColor: "#3e95ce",
backgroundColor: "#3e95ce",
fill: false
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Taric Ranking'
},
scales: {
xAxes: [{
type: 'time',
time: {
tooltipFormat: 'DD/MM hh:mm',
displayFormats: {
minute: 'DD/MM hh:mm'
}
},
ticks: {
maxTicksLimit: worldArrayData.length
}
}],
yAxes: [{
ticks: {
min: Math.floor(Math.min.apply(Math, worldArrayData) - 2),
max: Math.floor(Math.max.apply(Math, worldArrayData) + 2)
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="worldChart" height="150"></canvas>

Answer 2

I decided to use Chartist.js since it offers an easier implementation of moment.js
If you know how to answer the question, i'm still interested tho.