[Chartjs]-Chart.js bar chart x-axis label disappeared

10๐Ÿ‘

Old question, but this may be because you have to disable autoSkip:

scales: {
    xAxes: [{
        stacked: false,
        beginAtZero: true,
        scaleLabel: {
            labelString: 'Month'
        },
        ticks: {
            autoSkip: false
        }
    }]
}

You can read more about it here: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

0๐Ÿ‘

I was using
xAxes: [{ ticks: { autoSkip: false } },
{ gridLines: { display: false } }]
and it was failing and as soon as I removed gridLines as
xAxes: [{ ticks: { autoSkip: false } }
//{ gridLines: { display: false } }]
it started working: which means combination of property also needs to be consider.

0๐Ÿ‘

The only way this works is inside a updateScaleDefaults function.

Chart.scaleService.updateScaleDefaults('category', {
            gridLines: {
                drawBorder: false,
                drawOnChartArea: false,
                drawTicks: false
            },
            ticks: {
                // autoSkip: false,
                padding: 20
            },
            maxBarThickness: 10
        });

which is inside of what looks like a global config function, if i add it there it changes globally, and if i add the setting to the individual charts it doesn not work

Leave a comment