I'm working with a chart-js bar chart that has to be placed inside a small div so I was searching for a way to make the labels in the x-axis horizontal instead of diagonal. The point is to gain as much height as possible for the actual bars because right now the labels consume almost 40% of the available space.

This is my code:

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            display: false
        }]
    }
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

I have temporarily disabled the xAxis labels. It works but ideally I would like them to be horizontal. Thoughts?

I'm working with a chart-js bar chart that has to be placed inside a small div so I was searching for a way to make the labels in the x-axis horizontal instead of diagonal. The point is to gain as much height as possible for the actual bars because right now the labels consume almost 40% of the available space.

This is my code:

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            display: false
        }]
    }
};
let ctx = document.getElementById('barChartCtx');
let barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

I have temporarily disabled the xAxis labels. It works but ideally I would like them to be horizontal. Thoughts?

• javascript
• bar-chart
• chart.js

Share Follow asked Apr 1, 2017 at 15:08 dimlucasdimlucas 5,14177 gold badges4040 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use the scale ticks maxRotation and minRotation properties to control this.

Here is an example.

let options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }],
        xAxes: [{
            ticks: {
                minRotation: 0,
                maxRotation: 0
            }
        }]
    }
};

Keep in mind that the reason they are diagonal is because chart.js calculated that they would not fit at their default horizontal orientation. If you find that they overflow on each other when horizontal then you can still use the above properties to tweak the rotation so they are only slightly diagonal.