Chart.js 2 - label overlapping
10,542
I solved this problem by tilting the texts, so that they don't overlap.
Just add minRotation: 30
to ticks: {} object.
ticks: {
fontFamily: 'Lato',
fontColor: "#fff",
fontSize: 14,
minRotation: 30
}
Author by
Jakub
Updated on July 20, 2022Comments
-
Jakub almost 2 years
I'm using Chart.js 2 for one of my projects. I have successfully managed to style it but there is one issue that I can't seem to fix and it's getting on my nerves.
Sometimes the last label on x-axis is being overlapped.
Here are the options that I'm using:
$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 } } ] } };
Any help would be very appreciated.