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
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.
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.
This worked perfectly.
xAxes:[{
ticks:{
display: true,
autoSkip: true,
maxTicksLimit: 4
}
}]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With