I am currently utilizing Chart.js 2 for a project of mine. I've successfully customized the style, but there's one persistent issue that I can't seem to resolve and it's becoming quite frustrating.
Occasionally, the last label on the x-axis gets overlapped.
https://i.sstatic.net/M8xnq.png
Below are the specific options that I have implemented:
$scope.colours = [
{
borderColor: '#FFF',
},
{
borderColor: '#FAF6DD'
},
{
borderColor: '#A5CCFE'
}
];
$scope.options = {
type: 'line',
tooltips:
{
enabled: false
},
elements:
{
line:
{
borderWidth: 2,
fill: false
},
point:
{
radius: 0,
hoverRadius: 0
}
},
scales: {
yAxes: [
{
gridLines:
{
display: true,
color: "#16a693"
},
ticks:
{
fontFamily: 'Lato',
fontColor: "#fff",
fontSize: 14
}
}
],
xAxes: [
{
type: 'time',
ticks:
{
autoSkip: true,
display: true,
autoSkipPadding: 15,
fontFamily: 'Lato',
fontColor: "#fff",
fontSize: 14,
maxRotation: 0
},
time:
{
displayFormats:
{
'millisecond': 'HH:mm:ss',
'second': 'HH:mm:ss',
'minute': 'HH:mm:ss',
'hour': 'HH:mm:ss',
'day': 'HH:mm:ss',
'week': 'HH:mm:ss',
'month': 'HH:mm:ss',
'quarter': 'HH:mm:ss',
'year': 'HH:mm:ss'
}
},
gridLines:
{
display: false
}
}
]
}
};
I would greatly appreciate any assistance with this matter.