How to make ticks evenly spaced with Chart.js - chart.js

Question

I have a horizontalBar chart with one column. I want to have ticks got from 0 to 70, evenly spaced and 10 point increments. I've tried several options, but can't seem to make it work out. Best I could do was this:
Here is the code I used to generate this chart:
<div style="width: 330px; height: 100px;">
<canvas id="chartBarChart1" style="margin-right: auto; margin-left: auto; display: block;" height="100"></canvas>
</div>
<script>
var ctx = document.getElementById('chartBarChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['CI'],
datasets: [
{
label: 'CI',
data: [45],
backgroundColor: 'Red'
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
max: 70,
beginAtZero: true
}
}]
}, legend: { display: false },
responsive: false,
maintainAspectRatio: false
});
</script>
Is there a way?

Answer 1

Use "stepSize" to configure the ticks like this:
var ctx = document.getElementById('chartBarChart1').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['CI'],
datasets: [{
label: 'CI',
data: [45],
backgroundColor: 'Red'
}]
},
options: {
scales: {
xAxes: [{
ticks: {
max: 70,
beginAtZero: true,
stepSize: 10
}
}]
},
},
});
https://jsfiddle.net/hdahle/zxdjqo82/