Question posted in 
I wrote the following CODE using the chart.js library, which generates the OUTPUT displayed below. I’m seeking guidance on how to effectively control the labels on the horizontal axis.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="chart" width="1920" height="1080"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
yAxisID: 'yA',
label: 'Data1',
data: [
{ x: 0.05, y: 12 },
{ x: 0.15, y: 19 },
{ x: 0.25, y: 3 },
{ x: 0.35, y: 5 },
{ x: 0.45, y: 2 },
{ x: 0.55, y: 3 },
],
},
{
yAxisID: 'yB',
label: 'Data2',
data: [
{ x: 0.0, y: 20 },
{ x: 0.2, y: 1 },
{ x: 0.3, y: 15 },
{ x: 0.4, y: 2 },
{ x: 0.5, y: 31 },
{ x: 0.6, y: 11 },
],
}
]
},
options: {
responsive: true,
scales: {
yA: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'blue' },
grid: { display: false }
},
yB: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'green' },
grid: { display: false }
},
x: { ticks: { beginAtZero: true },
}
}
}
});
</script>
</body>
</html>I attempted to plot two datasets in a single Chart.js chart using the provided code. I expected both datasets to be clearly visualized on the chart.
SOLUTION
Adding type: 'linear' to the x-axis scales options.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="chart" width="1920" height="1080"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
yAxisID: 'yA',
label: 'Data1',
data: [
{ x: 0.05, y: 12 },
{ x: 0.15, y: 19 },
{ x: 0.25, y: 3 },
{ x: 0.35, y: 5 },
{ x: 0.45, y: 2 },
{ x: 0.55, y: 3 },
],
},
{
yAxisID: 'yB',
label: 'Data2',
data: [
{ x: 0.0, y: 20 },
{ x: 0.2, y: 1 },
{ x: 0.3, y: 15 },
{ x: 0.4, y: 2 },
{ x: 0.5, y: 31 },
{ x: 0.6, y: 11 },
],
}
]
},
options: {
responsive: true,
scales: {
yA: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'blue' },
grid: { display: false }
},
yB: {
type: 'linear',
position: 'left',
ticks: { beginAtZero: true, color: 'green' },
grid: { display: false }
},
x: { ticks: { beginAtZero: true },
type: 'linear',}
}
}
});
</script>
</body>
</html>
2
Answers
Based on the code snippet and the issue described, it seems that you’re having trouble with the horizontal (x-axis) labels in your Chart.js graph. To manage the labels on the horizontal axis, you need to configure the scales option in your chart configuration, specifically the x axis part.
From your code, I notice that you’re using data points with an x value that is a decimal. If you want these to appear as labels on the x-axis, you’ll need to specify the labels array in the data object of your chart configuration. However, Chart.js expects the labels array to be at the same level as datasets for the x-axis labels when you’re not using a time series.
Here’s a high-level example of how you might specify labels:
You have to add the labels and
datasetsformat is not as per the doc