Chart.js: only show labels on x-axis for data points
I have solved this problem by using ticks callback method and by setting autoSkip false. However, I am not using Timescale. In callback, you can pass your date and the desired format it will return the formatted date.
Below is the screenshot for the same and the working sample code.
[sample-code]
var ctx = document.getElementById("chart_hr");
function newDate(day, month) {
return moment().date(day).month(month);
}
var data = {
labels: [newDate(8,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
lineTension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
lineTension: 0,
}
]
};
var options = {
scales: {
xAxes: [{
ticks: {
autoSkip : false,
callback: function(value, index, values) {
return new moment(value).format('DD MMM');
}
},
gridLines : {
display : false,
}
}],
yAxes: [{
ticks: {
min: 50,
max: 190,
stepSize: 10
}
}],
},
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
In order to only show the dates that appear in the dataset, use the distribution
property set to 'series'
. This will result in equal distances between points, removing extraneous gaps. Note: this, unfortunately, only works for time series data. If you wish to produce labels for given datapoints for different values or different axis use the answer provided above using autoSkip
property and a callback function.
Example:
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
time: {
unit: 'day'
}
}]
}
}