Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AutoSkip: False not working on time xAxes labels

Tags:

chart.js

I have a bar chart, which is autoSkipping every second xAxes labels. I need to show all labels, however setting AutoSkip: False is having no effect. Below is my code, I have removed some extra datasets from it.

        var myChart2 = new Chart(document.getElementById("ch2"), {
        type: 'bar',
        data: {
            datasets: [
                {
                    label: 'Budget',
                    data: [<data here>]
                }
            ]
        },
        options: {
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        return '$' + tooltipItem.yLabel;
                    }
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function (value, index, values) {
                            return '$' + (value >= 1000000  ? value/1000000+'M' : value);
                        }
                    },
                    stacked: true
                }],
                xAxes: [{
                    type: "time",
                    ticks: {
                        autoSkip: false    // Not working
                    },
                    time: {
                        unit: 'month',
                        format: 'DD MMM YYYY',
                        tooltipFormat: 'MMM YYYY',
                        displayFormats: {
                            month: 'MMM'
                        }
                    },
                    offset: true,
                    gridLines: {
                        display: false,
                        offsetGridLines: true
                    }
                }]
            }
        }
    });

Current output

like image 580
Louis Avatar asked Oct 16 '22 07:10

Louis


1 Answers

In my case, I needed to set source: date. You will get all the date steps on xAxi. By the way, try source: auto it'll try set optimal count of steps (not all). Check here https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source

like image 170
Vitaliy Javurek Avatar answered Oct 21 '22 07:10

Vitaliy Javurek