简体   繁体   中英

Hide y-axis without hiding grid in chart.js

I would like to show horizontal gridlines without showing the y-Axis. Is it possible?

If I set:

y: {
    display: false,
    grid: {
        display: true
    }
}

gridlines are hidden.

You can create a custom tick callback that just returns an empty string:

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    callback: function(value, index, ticks) {
                        return '';
                    }
                }
            }
        }
    }
});

You can also disable ticks and drawTicks in your grid:

const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        y: {
            grid: {
              drawTicks: false
            },
            ticks: {
              display: false
            }
        }
    }
}

});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM