[Chartjs]-How I can prevent of labels overlapping on mobile screen Chart.js

by

6👍

✅

This can be prevented by changing the y-axis label­‘s font size on-the-fly (dynamically). Though, in ChartJS there is no built-in method to do so, meaning no matter how you resize the chart, the font size will always be the same.

However, to get around this, you can use the following chart plugin, which will make the font size responsive …

plugins: [{
   beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      c.scales['y-axis-0'].options.ticks.fontSize = chartHeight * 6 / 100;
   }
}]

add this plugin followed by your chart options.

Here is a working example on jsFiddle

1👍

You could add some CSS to stop the chart getting too small, forcing some users on mobile to scroll right:
https://jsfiddle.net/panchroma/yybc26Lr/1/

The only change I made was add 

.chart{
  min-width:300px;
}

Leave a comment