1👍
✅
The problem is that you’ve built the X axis of the line chart with labels, which are categorical and not numeric.
In order to apply a numeric range to the X axis, you need to do two things:
- Set the xAxis
type: "linear" - Change
dataset.datato{x, y}coordinates.
In other words, the data that you pass to Chart.js has to look like this:
[
{x: 0, y: 0},
{x: 0.26, y: 0.4},
{x: 0.43, y: 1.2},
...
]
I’ve modified your example below to show this in action, including the X axis range from 0 to 12. Here’s what it looks like:
Here’s the modified code. Note that I just included your data directly instead of using D3:
const ctx = document.getElementById('myChart').getContext('2d');
const series = [
[0, 0],
[0.266666666666667, 0.4],
[0.433333333333333, 1.2],
[0.6, 2.5],
[0.766666666666667, 4.4],
[0.933333333333333, 6.8],
[1.1, 9.6],
[1.26666666666667, 12.8],
[1.43333333333333, 16.9],
[1.6, 22],
[1.76666666666667, 28.3],
[1.93333333333333, 35.7],
[2.1, 44.2],
[2.26666666666667, 53.9],
[2.43333333333333, 64.7],
[2.6, 76.4],
[2.76666666666667, 88.3],
[2.93333333333333, 100],
[3.1, 110],
[3.26666666666667, 121],
[3.43333333333333, 130],
[3.6, 139],
[3.76666666666667, 148],
[3.93333333333333, 156],
[4.1, 163],
[4.26666666666667, 169],
[4.43333333333333, 175],
[4.6, 180],
[4.76666666666667, 184],
[4.93333333333333, 188],
[5.1, 191],
[5.26666666666667, 194],
[5.43333333333333, 196],
[5.6, 198],
[5.76666666666667, 200],
[5.93333333333333, 200],
[6.1, 201],
[6.26666666666667, 201],
[6.43333333333333, 202],
[6.6, 201],
[6.76666666666667, 201],
[6.93333333333333, 201],
[7.1, 200],
[7.26666666666667, 200],
[7.43333333333333, 199],
[7.6, 199],
[7.76666666666667, 198],
[7.93333333333333, 198],
[8.1, 198],
[8.26666666666667, 198],
[8.43333333333333, 198],
[8.6, 197],
[8.76666666666667, 197],
[8.93333333333333, 198],
[9.1, 198],
[9.26666666666667, 198],
[9.43333333333333, 198],
[9.6, 198],
[9.76666666666667, 198],
[9.93333333333333, 199],
[10.1, 199],
[10.2666666666667, 199],
[10.4333333333333, 199],
[10.6, 199],
[10.7666666666667, 199],
[10.9333333333333, 200],
[11.1, 200],
[11.2666666666667, 200],
[11.4333333333333, 200],
[11.6, 200],
[11.7666666666667, 200],
[11.9333333333333, 201],
[12.1, 201],
];
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: series.map(datum => ({
x: datum[0],
y: datum[1]
})),
backgroundColor: '#2a54a9',
borderColor: '#2a54a9',
fill: false,
// pointRadius: 10,
// pointHoverRadius: 15,
showLine: false // no line shown
}]
},
options: {
scales: {
xAxes: [{
type: "linear",
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
afterFit: function(scale) {
scale.height = 80 //<-- set value as you wish
},
scaleLabel: {
display: true,
labelString: 'Tiempo (min)',
fontSize: 18,
// fontFamily: 'Cabin Sketch',
fontColor: '#111111'
},
ticks: {
fontSize: 16,
// fontFamily: 'EB Garamond',
fontColor: '#111111',
max: 12,
min: 0,
stepSize: 1.0,
padding: 10
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
scaleLabel: {
display: true,
labelString: 'Altitud (km)',
fontSize: 18,
// fontFamily: 'Cabin Sketch',
fontColor: '#111111'
},
ticks: {
beginAtZero: true,
fontSize: 16,
// fontFamily: 'EB Garamond',
fontColor: '#111111',
padding: 10,
stepSize: 50,
suggestedMax: 250,
suggestedMin: 0
}
}]
},
legend: {
display: false
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>0👍
Excellent answer – congrats.
For those interested, here code adapted to work with latest chart.js version v3.2.1
(chart.js v3.xx is not backwards compatible with v2.xx)
instead of v2.9.3
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
now v3.x
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
(gets you the latest version of chart.js (now at v3.2.1)
const ctx = document.getElementById('myChart').getContext('2d');
const series = [
[0, 0],
[0.266666666666667, 0.4],
[0.433333333333333, 1.2],
[0.6, 2.5],
[0.766666666666667, 4.4],
[0.933333333333333, 6.8],
[1.1, 9.6],
[1.26666666666667, 12.8],
[1.43333333333333, 16.9],
[1.6, 22],
[1.76666666666667, 28.3],
[1.93333333333333, 35.7],
[2.1, 44.2],
[2.26666666666667, 53.9],
[2.43333333333333, 64.7],
[2.6, 76.4],
[2.76666666666667, 88.3],
[2.93333333333333, 100],
[3.1, 110],
[3.26666666666667, 121],
[3.43333333333333, 130],
[3.6, 139],
[3.76666666666667, 148],
[3.93333333333333, 156],
[4.1, 163],
[4.26666666666667, 169],
[4.43333333333333, 175],
[4.6, 180],
[4.76666666666667, 184],
[4.93333333333333, 188],
[5.1, 191],
[5.26666666666667, 194],
[5.43333333333333, 196],
[5.6, 198],
[5.76666666666667, 200],
[5.93333333333333, 200],
[6.1, 201],
[6.26666666666667, 201],
[6.43333333333333, 202],
[6.6, 201],
[6.76666666666667, 201],
[6.93333333333333, 201],
[7.1, 200],
[7.26666666666667, 200],
[7.43333333333333, 199],
[7.6, 199],
[7.76666666666667, 198],
[7.93333333333333, 198],
[8.1, 198],
[8.26666666666667, 198],
[8.43333333333333, 198],
[8.6, 197],
[8.76666666666667, 197],
[8.93333333333333, 198],
[9.1, 198],
[9.26666666666667, 198],
[9.43333333333333, 198],
[9.6, 198],
[9.76666666666667, 198],
[9.93333333333333, 199],
[10.1, 199],
[10.2666666666667, 199],
[10.4333333333333, 199],
[10.6, 199],
[10.7666666666667, 199],
[10.9333333333333, 200],
[11.1, 200],
[11.2666666666667, 200],
[11.4333333333333, 200],
[11.6, 200],
[11.7666666666667, 200],
[11.9333333333333, 201],
[12.1, 201],
];
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: series.map(datum => ({
x: datum[0],
y: datum[1]
})),
backgroundColor: '#2a54a9',
borderColor: '#2a54a9',
fill: false,
showLine: false
}]
},
options: {
scales: {
x: { // as of v3.x now object instead of array, 'x: {' instead of 'xAxis: [{'
type: "linear",
max: 12, // as of v3.x now here
min: 0, // as of v3.x now here
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
afterFit: function(scale) {
scale.height = 80
},
scaleLabel: {
display: true,
labelString: 'Tiempo (min)',
fontSize: 18,
fontColor: '#111111'
},
ticks: {
fontSize: 16,
fontColor: '#111111',
//max: 12, // as of v3.x not here anymore
//min: 0, // as of v3.x not here anymore
stepSize: 1.0,
padding: 10
}
},
y: { // as of v3.x now object instead of array, 'y: {' instead of 'yAxis: [{'
gridLines: {
drawOnChartArea: false,
color: "#111111"
},
scaleLabel: {
display: true,
labelString: 'Altitud (km)',
fontSize: 18,
fontColor: '#111111'
},
ticks: {
beginAtZero: true,
fontSize: 16,
fontColor: '#111111',
padding: 10,
stepSize: 50,
suggestedMax: 250,
suggestedMin: 0
}
}
},
legend: {
display: false
},
}
});
</script><script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>Source:stackexchange.com