I have a line chart created using ChartJs. I have added a AutoSkip: false in the Y-axis under scales in my javascript as I want to show every single dates from the labels on Y-axis but some of my dates are being skipped.
The dates start from 2022-02-25 and ends at 2022-05-06. But the Y-axis is skipping some of the dates. I do not want that. I want every single dates to be displayed. Can anyone tell me what’s wrong with my code?
Below is the sample of my codes:
// setup
const data = {
datasets: [
{label: 'PZ-1',data:[{y:'2022-02-25', x:40.551},{y:'2022-03-01', x:35.889},{y:'2022-03-02', x:34.68},{y:'2022-03-03', x:33.182},{y:'2022-03-04', x:30.82},{y:'2022-03-05', x:29.864},{y:'2022-03-08', x:28.413},{y:'2022-03-10', x:28.413},{y:'2022-03-12', x:28.424},{y:'2022-03-15', x:25.578},{y:'2022-03-17', x:27.07},{y:'2022-03-19', x:27.42},{y:'2022-03-22', x:27.478},{y:'2022-03-24', x:22.817},{y:'2022-03-26', x:22.576},{y:'2022-03-29', x:22.326},{y:'2022-03-31', x:22.011},{y:'2022-04-02', x:21.672},{y:'2022-04-05', x:21.561},{y:'2022-04-07', x:21.307},{y:'2022-04-09', x:34.988},{y:'2022-04-12', x:28.89},{y:'2022-04-14', x:28.618},{y:'2022-04-17', x:28.862},{y:'2022-04-19', x:27.727},{y:'2022-04-21', x:27.493},{y:'2022-04-23', x:27.149},{y:'2022-04-26', x:25.862},{y:'2022-04-28', x:25.59},{y:'2022-04-30', x:25.37},{y:'2022-05-04', x:24.79},{y:'2022-05-06', x:24.927}],backgroundColor: '#FFD700',borderColor: '#FFD700',borderWidth: 1}
]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y:{
reverse: true,
type: 'time',
ticks: {
autoSkip: false
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
); * {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
@media only screen and (min-width: 1600px) {.chartBox {width: 1600px; }}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>>Solution :
The time scale by default generates nice ticks because time can be verry far appart. If you want to show all the ticks you will need to set the source in the ticks to 'data'. After that the autoskip property will work.
scales: {
y: {
type: 'time',
ticks: {
source: 'data',
autoSkip: false
}
}
}
Live example:
// setup
const data = {
datasets: [{
label: 'PZ-1',
data: [{
y: '2022-02-25',
x: 40.551
}, {
y: '2022-03-01',
x: 35.889
}, {
y: '2022-03-02',
x: 34.68
}, {
y: '2022-03-03',
x: 33.182
}, {
y: '2022-03-04',
x: 30.82
}, {
y: '2022-03-05',
x: 29.864
}, {
y: '2022-03-08',
x: 28.413
}, {
y: '2022-03-10',
x: 28.413
}, {
y: '2022-03-12',
x: 28.424
}, {
y: '2022-03-15',
x: 25.578
}, {
y: '2022-03-17',
x: 27.07
}, {
y: '2022-03-19',
x: 27.42
}, {
y: '2022-03-22',
x: 27.478
}, {
y: '2022-03-24',
x: 22.817
}, {
y: '2022-03-26',
x: 22.576
}, {
y: '2022-03-29',
x: 22.326
}, {
y: '2022-03-31',
x: 22.011
}, {
y: '2022-04-02',
x: 21.672
}, {
y: '2022-04-05',
x: 21.561
}, {
y: '2022-04-07',
x: 21.307
}, {
y: '2022-04-09',
x: 34.988
}, {
y: '2022-04-12',
x: 28.89
}, {
y: '2022-04-14',
x: 28.618
}, {
y: '2022-04-17',
x: 28.862
}, {
y: '2022-04-19',
x: 27.727
}, {
y: '2022-04-21',
x: 27.493
}, {
y: '2022-04-23',
x: 27.149
}, {
y: '2022-04-26',
x: 25.862
}, {
y: '2022-04-28',
x: 25.59
}, {
y: '2022-04-30',
x: 25.37
}, {
y: '2022-05-04',
x: 24.79
}, {
y: '2022-05-06',
x: 24.927
}],
backgroundColor: '#FFD700',
borderColor: '#FFD700',
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
},
y: {
reverse: true,
type: 'time',
ticks: {
autoSkip: false,
source: 'data'
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartCard {
width: 100vw;
height: 100vh;
background: rgba(255, 26, 104, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 1200px;
padding: 50px;
border-radius: 20px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
@media only screen and (min-width: 1600px) {
.chartBox {
width: 1600px;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Line Chart</title>
</head>
<body>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart" style="position: relative;"></canvas>
</div>
</div>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>