Issue
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>
Solution
You have to add the labels and datasets
format is not as per the doc
<!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 labels = ['0.05', '0.1', '0.15', '0.2', '0.25', '0.3', '0.35', '0.4', '0.45', '0.5', '0.55', '0.6'];
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
yAxisID: 'yA',
label: 'Data1',
data: [12, 0, 19, 0, 3, 0, 5, 0, 2, 0, 3, 0], // Insert zeros for non-existent labels
},
{
yAxisID: 'yB',
label: 'Data2',
data: [0, 20, 0, 1, 0, 15, 0, 2, 0, 31, 0, 11], // Insert zeros for non-existent labels
}
]
},
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>
Answered By - Jai248
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.