CODEWITHSUNDEEP
reactjschartschart.js
Dmitry Fadeev
Dmitry Fadeev

Reputation: 2083

Chartjs show labels but not ticks

I'm using ChartJS in my React application to render Bar chart with vertical bars and I need to display the label at the bottom of each bar but hide the vertical lines that come in between bars (ticks). Here is what I tried so far:

This does the opposite from what I want, it shows the ticks but not the labels:

xAxes : [ {
        display : true, // set this to false to hide the labels under the bars
        ticks: {
            display : false
        }
    }]

This shows everything:

xAxes : [ {
            display : true, // set this to false to hide the labels under the bars
            maxTicksLimit: 0
        }]

Any suggestions?

Upvotes: 2

Views: 1426

Answers (2)

Adrian Khoo
Adrian Khoo

Reputation: 1

For Chartjs 2.9.3, you can use:

    xAxes: [{
      gridLines: {
        drawTicks: false,
       }
    }]

Upvotes: 0

dangre00
dangre00

Reputation: 450

How about setting the gridline display to false?

xAxes: [{
    gridLines: {display:false}
    }]

FIDDLE HERE

Upvotes: 1

Related Questions