Geek Answers Handbook

Chart.js 2 - overlapping labels

I am using Chart.js 2 for one of my projects. I managed to create a style, but there is one problem that I seem to be unable to fix, and it is nervous.

Sometimes the last mark on the x axis overlaps.

Tagging

Here are the options 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 greatly appreciated.

+5
source share
1 answer

I solved this problem by tilting the texts so that they did not overlap.

Just add minRotation: 30 to the ticks: {} object.

  ticks: { fontFamily: 'Lato', fontColor: "#fff", fontSize: 14, minRotation: 30 }
+1
source

More articles:


All Articles