0👍
There is nothing wrong with your code. This is a data problem. There are a few empty values in your data:
data: [,,,,,,,,,,,,,,,,,,,5596,5307,5046,4901,4580,4151,]
The result is a few empty points before the points with real data appear, like this:
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'APAC RE Index',
backgroundColor: "#ff0000",
borderColor: "#ff00000",
fill: false,
data: [,,,
10,
50,
30,
60,
100,
50,
150
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
display: true,
//type: 'logarithmic',
scaleLabel: {
display: true,
labelString: 'Index Returns'
},
ticks: {
min: 0,
max: 200,
// forces step size to be 5 units
stepSize: 100
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};<script src="https://cdn2.hubspot.net/hubfs/476360/utils.js"></script>
<canvas id="canvas" style="display: block; width: 1379px; height: 689px;" width="1379" height="689" class="chartjs-render-monitor"></canvas>
<script src="https://cdn2.hubspot.net/hubfs/476360/Chart.js"></script>Simply remove these points:
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'APAC RE Index',
backgroundColor: "#ff0000",
borderColor: "#ff00000",
fill: false,
data: [
10,
50,
30,
60,
100,
50,
150
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
display: true,
//type: 'logarithmic',
scaleLabel: {
display: true,
labelString: 'Index Returns'
},
ticks: {
min: 0,
max: 200,
// forces step size to be 5 units
stepSize: 100
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};<script src="https://cdn2.hubspot.net/hubfs/476360/Chart.js"></script>
<canvas id="canvas" style="display: block; width: 1379px; height: 689px;" width="1379" height="689" class="chartjs-render-monitor"></canvas>Otherwise, if data begins later in time then just delete earlier labels as there is no need for them to be there. For example, if data begins in May:
var config = {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
label: 'APAC RE Index',
backgroundColor: "#ff0000",
borderColor: "#ff00000",
fill: false,
data: [
100,
50,
150
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
display: true,
//type: 'logarithmic',
scaleLabel: {
display: true,
labelString: 'Index Returns'
},
ticks: {
min: 0,
max: 200,
// forces step size to be 5 units
stepSize: 100
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};<script src="https://cdn2.hubspot.net/hubfs/476360/utils.js"></script>
<canvas id="canvas" style="display: block; width: 1379px; height: 689px;" width="1379" height="689" class="chartjs-render-monitor"></canvas>
<script src="https://cdn2.hubspot.net/hubfs/476360/Chart.js"></script>If data comes from an external source you can create a function to delete unneeded values. Here is a rudimentary example where fixData() will delete unneded data and labels values:
var globalLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']
var globalData = [,,,
10,
50,
30,
60,
100,
50,
150
]
function fixData() {
for (let i = 0; i <= globalData.length; i++) {
if (globalData[i] === undefined) {
globalData.splice(0, 1)
globalLabels.splice(0, 1)
}
}
}
fixData()
var config = {
type: 'line',
data: {
labels: globalLabels,
datasets: [{
label: 'APAC RE Index',
backgroundColor: "#ff0000",
borderColor: "#ff00000",
fill: false,
data: globalData,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
display: true,
//type: 'logarithmic',
scaleLabel: {
display: true,
labelString: 'Index Returns'
},
ticks: {
min: 0,
max: 200,
// forces step size to be 5 units
stepSize: 100
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};<script src="https://cdn2.hubspot.net/hubfs/476360/utils.js"></script>
<canvas id="canvas" style="display: block; width: 1379px; height: 689px;" width="1379" height="689" class="chartjs-render-monitor"></canvas>
<script src="https://cdn2.hubspot.net/hubfs/476360/Chart.js"></script>Source:stackexchange.com