Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display a limited number of labels only on X-Axis of Line Chart using Chart.js

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

like image 532
Jai Avatar asked Sep 16 '18 19:09

Jai


People also ask

How do you put data labels on axis?

Add Data LabelsSelect the chart. Click the Chart Elements button. Click the Data Labels check box. In the Chart Elements menu, click the Data Labels list arrow to change the position of the data labels.

How do I add data labels to the X axis in Excel?

From the Design tab, Data group, select Select Data. In the dialog box under Horizontal (Category) Axis Labels, click Edit. In the Axis label range enter the cell references for the x-axis or use the mouse to select the range, click OK. Click OK.


1 Answers

This worked perfectly.

xAxes:[{
    ticks:{
        display: true,
        autoSkip: true,
        maxTicksLimit: 4
    }
}]
like image 133
Jai Avatar answered Sep 23 '22 05:09

Jai