1) How to display only first, middle and last OR only first and last labels(Dates) on X-Axis of Line chart using chart.js?

2) Also, if possible I want to display only those specific number of vertical gridlines.

Code:

var myLineChart = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
        labels: reportDate,
        datasets:[{
            label: 'ABC',
            data: abcArray,
            backgroundColor:"white",
            borderColor: "darkblue",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'DEF',
            data: defArray,
            backgroundColor:"white",
            borderColor: "magenta",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'XYZ',
            data: xyzArray,
            backgroundColor:"white",
            borderColor: "lightgreen",
            fill: false,
            lineTension: 0,
            radius: 5
        }]
    },
    options: {
        responsive: true,
        scales:{
            xAxes:[{
                ticks:{
                    display: true
                }
            }],
            yAxes:[{
                gridLines:{
                    display: false
                }
            }]
        },
        tooltips:{
            mode:'index'
        }
    }
});

Line Chart Image

1) How to display only first, middle and last OR only first and last labels(Dates) on X-Axis of Line chart using chart.js?

2) Also, if possible I want to display only those specific number of vertical gridlines.

Code:

var myLineChart = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
        labels: reportDate,
        datasets:[{
            label: 'ABC',
            data: abcArray,
            backgroundColor:"white",
            borderColor: "darkblue",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'DEF',
            data: defArray,
            backgroundColor:"white",
            borderColor: "magenta",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'XYZ',
            data: xyzArray,
            backgroundColor:"white",
            borderColor: "lightgreen",
            fill: false,
            lineTension: 0,
            radius: 5
        }]
    },
    options: {
        responsive: true,
        scales:{
            xAxes:[{
                ticks:{
                    display: true
                }
            }],
            yAxes:[{
                gridLines:{
                    display: false
                }
            }]
        },
        tooltips:{
            mode:'index'
        }
    }
});

Line Chart Image

• javascript
• chart.js

• Line number 4 - labels: reportDate - In this reportDate is an array of dates which will be later in format of mm/dd/yyyy, thus I need to display less number of dates so the UI looks cleaner. – Jai Commented Sep 16, 2018 at 19:58

2 Answers 2

This worked perfectly.

xAxes:[{
    ticks:{
        display: true,
        autoSkip: true,
        maxTicksLimit: 4
    }
}]

Above Char.js Version 4.21

xAxes was changed to x and array format was changed to object format

Example:

  scales: {
    x: {
      ticks: {
        display: true,
        autoSkip: true,
        maxTicksLimit: 15,
      },
    },
  },

Source: https://www.chartjs/docs/latest/axes/cartesian/linear.html#mon-tick-options-to-all-cartesian-axes