Reputation: 3373
I use latest Chart.js 2.9.3. I've tried the following code with major ticks:
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
barPercentage: 0.2,
borderColor: 'black',
borderWidth: 2,
borderSkipped: false,
backgroundColor: 'transparent',
data: [[0, 8000]]
}]
},
options: {
legend: false,
tooltips: false,
animation: false,
title: {
display: true,
fontSize: '26',
text: 'AT1G24460'
},
scales: {
xAxes: [{
position: 'top',
offset: true,
ticks: {
major: {
enabled: true,
fontColor: 'red'
}
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="text-center">
<canvas id="chart"></canvas>
</div>
The result is the following (major ticks are not displayed at all). So how to make major tick marks work in chart.js?
P.S. My final goal is to have top axis like this:
What axis styling is possible without direct canvas painting (ticks below axis baseline, first and last ticks are enlarged, two labels for first and last ticks, no labels except fof first and last tick, etc.)
Thank you in advance.
Upvotes: 1
Views: 2815
Reputation: 3373
Major ticks are only supported on the time scale in 2.9. In 3.0 they are also being added to the log scale. They're not in the linear scale yet. But major ticks are most useful for deciding which ticks not to skip in the autoSkipper. 3.0 will also add better support for tick styling via scriptable tick options (#7337), which will allow you to make ticks that you want bolder, bigger, different colors, etc. and you don't need major tick support for that. I'd recommend trying 3.0
Upvotes: 1