Chart JS data labels getting cut

Question

I am using Chart JS with data label plugin and I want to show data labels next to the bar and pie chart but noticed that some of the data labels are getting cut or going out of canvas. Is their any way to fix this?

    var chartData3 = {
        labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
      backgroundColor: "#79D1CF",
      data: [60, 90, 81, 56, 55, 40],
      datalabels: {
        align: 'end',
        anchor: 'end'
      }
    }]
  };

https://plnkr.co/edit/I906pCN8tdrrOX2hgN0W?p=preview

Thanks, MSK

Visakhapatnam

Answer 1

You need to set padding to display the labels properly. Also, adjust the canvas width and height to account for padding so that your chart doesn't get too small.

options: {        
    layout: {
        padding: {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
        }
    }
}

Tasiatasiana

Live demo: https://jsfiddle.net/vmk2ew15/. – Zingg

Answer 2

Set max tick in chart option, for example:

this.chartOption.scales.yAxes[0].ticks.max = Math.max(...chartData3.datasets[0].data) * 1.2

Unthinking

Answer 3

I found a workaround. If you set to true the property "ticks-display" makes the canvas grow to show labels. After that, you can set ticks color to match with the background color in order to hide ticks.

Polacre