bairog
bairog

Reputation: 3373

How to use major tick marks in chart.js 2.9.3?

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: enter image description here

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

Answers (1)

bairog
bairog

Reputation: 3373

Official answer:

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

Related Questions