Home / Questions / 271328
Accepted
Lina Cortés
Asked: 2020-06-12 13:23:53 +0800 CST 2020-06-12 13:23:53 +0800 CST

Customize x axis graph time chart.js

  • 772

I'm making a time chart with Chart.js to show values ​​by day, I don't know how to customize the x-axis labels to group them by month enter image description here

The values ​​of the x axis appear by month/day (Jan 6), the idea would be that all of January only shows a label of January and so on

var s1 = {
            label: 'Enero',
            borderColor: "rgba(220,20,20,1)",
            backgroundColor: "rgba(220,20,20,0.5)",
            data: [
                {x: '2017-01-06', y: 100},
                {x: '2017-01-07', y: 150},
                {x: '2017-01-08', y: 90},
                {x: '2017-01-09', y: 180},
                {x: '2017-01-10', y: 200},
                {x: '2017-01-11', y: 210},
                {x: '2017-01-12', y: 56},
                {x: '2017-01-13', y: 101},
                {x: '2017-01-14', y: 105},
                {x: '2017-01-15', y: 201},
                {x: '2017-01-16', y: 500},
                {x: '2017-01-17', y: 710},
                {x: '2017-01-18', y: 650},
                {x: '2017-01-19', y: 611},
                {x: '2017-01-20', y: 450},
                {x: '2017-01-21', y: 101},
                {x: '2017-01-22', y: 200},
                {x: '2017-01-23', y: 101},
                {x: '2017-01-24', y: 300},
                {x: '2017-01-25', y: 661},
                {x: '2017-01-26', y: 250},
                {x: '2017-01-27', y: 301},
                {x: '2017-01-28', y: 400},
                {x: '2017-01-29', y: 501},
                {x: '2017-01-30', y: 600},
                {x: '2017-01-31', y: 701},
            ]
        };
        var s2 = {
            label: 'Febrero',
            borderColor: "rgba(220,20,20,1)",
            backgroundColor: "rgba(220,20,20,0.5)",
            data: [
                {x: '2017-02-01', y: 100},
                {x: '2017-02-02', y: 150},
                {x: '2017-02-03', y: 90},
                {x: '2017-02-04', y: 180},
                {x: '2017-02-05', y: 180},
                {x: '2017-02-06', y: 100},
                {x: '2017-02-07', y: 150},
                {x: '2017-02-08', y: 90},
                {x: '2017-02-09', y: 180},
                {x: '2017-02-10', y: 200},
                {x: '2017-02-11', y: 210},
                {x: '2017-02-12', y: 56},
                {x: '2017-02-13', y: 101},
                {x: '2017-02-14', y: 105},
                {x: '2017-02-15', y: 201},
                {x: '2017-02-16', y: 500},
                {x: '2017-02-17', y: 710},
                {x: '2017-02-18', y: 650},
                {x: '2017-02-19', y: 611},
                {x: '2017-02-20', y: 450},
                {x: '2017-02-21', y: 101},
                {x: '2017-02-22', y: 200},
                {x: '2017-02-23', y: 101},
                {x: '2017-02-24', y: 300},
                {x: '2017-02-25', y: 661},
                {x: '2017-02-26', y: 250},
                {x: '2017-02-27', y: 301},
                {x: '2017-02-28', y: 400},
            ]
        };
        var config = {
            type: 'bar',
            data: {datasets: [s1, s2]},
            options: {
                scales: {
                    xAxes: [{
                            type: "time",
                            time: {
                                unit: 'day',
                                round: 'day',
                                displayFormats: {
                                    day: 'MMM D'
                                }
                            }
                        }],
                    yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                }
            }
        }

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
javascript

1 Answers

  1. Best Answer

    You can achieve this by changing the format to MMMand adding maxTicksLimitlike so:

    var s1 = {
            label: 'Enero',
            borderColor: "rgba(220,20,20,1)",
            backgroundColor: "rgba(220,20,20,0.5)",
            data: [
                {x: '2017-01-06', y: 100},
                {x: '2017-01-07', y: 150},
                {x: '2017-01-08', y: 90},
                {x: '2017-01-09', y: 180},
                {x: '2017-01-10', y: 200},
                {x: '2017-01-11', y: 210},
                {x: '2017-01-12', y: 56},
                {x: '2017-01-13', y: 101},
                {x: '2017-01-14', y: 105},
                {x: '2017-01-15', y: 201},
                {x: '2017-01-16', y: 500},
                {x: '2017-01-17', y: 710},
                {x: '2017-01-18', y: 650},
                {x: '2017-01-19', y: 611},
                {x: '2017-01-20', y: 450},
                {x: '2017-01-21', y: 101},
                {x: '2017-01-22', y: 200},
                {x: '2017-01-23', y: 101},
                {x: '2017-01-24', y: 300},
                {x: '2017-01-25', y: 661},
                {x: '2017-01-26', y: 250},
                {x: '2017-01-27', y: 301},
                {x: '2017-01-28', y: 400},
                {x: '2017-01-29', y: 501},
                {x: '2017-01-30', y: 600},
                {x: '2017-01-31', y: 701},
            ]
        };
        var s2 = {
            label: 'Febrero',
            borderColor: "rgba(110,10,10,1)",
            backgroundColor: "rgba(110,10,10,0.5)",
            data: [
                {x: '2017-02-01', y: 100},
                {x: '2017-02-02', y: 150},
                {x: '2017-02-03', y: 90},
                {x: '2017-02-04', y: 180},
                {x: '2017-02-05', y: 180},
                {x: '2017-02-06', y: 100},
                {x: '2017-02-07', y: 150},
                {x: '2017-02-08', y: 90},
                {x: '2017-02-09', y: 180},
                {x: '2017-02-10', y: 200},
                {x: '2017-02-11', y: 210},
                {x: '2017-02-12', y: 56},
                {x: '2017-02-13', y: 101},
                {x: '2017-02-14', y: 105},
                {x: '2017-02-15', y: 201},
                {x: '2017-02-16', y: 500},
                {x: '2017-02-17', y: 710},
                {x: '2017-02-18', y: 650},
                {x: '2017-02-19', y: 611},
                {x: '2017-02-20', y: 450},
                {x: '2017-02-21', y: 101},
                {x: '2017-02-22', y: 200},
                {x: '2017-02-23', y: 101},
                {x: '2017-02-24', y: 300},
                {x: '2017-02-25', y: 661},
                {x: '2017-02-26', y: 250},
                {x: '2017-02-27', y: 301},
                {x: '2017-02-28', y: 400},
            ]
        };
        var config = {
            type: 'bar',
            data: {datasets: [s1, s2]},
            options: {
                scales: {
                    xAxes: [{
                            type: "time",
                            time: {
                                unit: 'day',
                                round: 'day',
                                displayFormats: {
                                    day: 'MMM'
                                }
                            },
                            ticks: {
                               autoSkip: true,
                               maxTicksLimit: 2
                            }
                        }],
                    yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                }
            }
        }

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<canvas id="canvas"></canvas>

    • 3