everyone. I am learning how to work with ChartJs. In particular, trying to work in step size in different type of graphs. In example bellow, I can set stepsize for OY, however when it came to OX, it doesn't change anything. And stepsize for OX is number but it should be period of time (2 days, 3 days) How to alter step for OX?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Chart JS </title>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 40px;
background: #000000;
color: rgb(0, 0, 0);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(97, 113, 147, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(145, 175, 241, 0.2);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
<hr>Step size OY
<input type="number" id ="steps">
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
// setup
const data = {
labels: ['20.04.2022', '25.04.2022', '30.04.2022', '04.05.2022', '09.05.2022', '14.05.2022'],
datasets: [{
label: 'Weekly Sales',
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
'rgba(255, 26, 104, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(0, 0, 0, 0.2)'
],
borderColor: [
'rgba(255, 26, 104, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgb(173,102,255)',
'rgba(255, 159, 64, 1)',
'rgb(0,0,0)'
],
borderWidth: 1
}]
};
// config
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
autoSkip: false,
time: {
unit: 'day',
parser: 'dd.MM.yyyy',
},
ticks: {
stepSize: 4
},
},
y: {
beginAtZero: true,
ticks: {
stepSize: 3
}
}
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
const steps = document.getElementById('steps');
steps.addEventListener('input', (e) => {
stepSizeY(myChart, e)
});
function stepSizeY(chart,e) {
chart.config.options.scales.y.ticks.stepSize = steps.value;
chart.update()
}
</script>
</body>
</html>
The stpeSize option, used to calculate the differences among ticks, must be defined in time node and not in the ticks:
EDIT: the CHART.JS doc is saying to use stepSize in time node and not in ticks, therefore it's not a bug of CHART.JS.
time: {
unit: 'day',
parser: 'dd.MM.yyyy',
stepSize: 4
},