Chartjs: Overlapping values when using Datalabels plugin

2
votes

I am using the datalabels plugin, and the values overlap if they are too long: enter image description here

I tried using the diaply auto under plugins datalabels, but it stills overlaps, any ideas what to do so that they dont overlap?

here are my options:

const getOptions = (yAxisDisplayLabel, data, previousOpts, isMobile) => ({
  ...previousOpts,
  layout: {
    padding: {
      top: 20,
    },
  },
  plugins: {
    datalabels: {
      font: {
        size: isMobile ? 8 : 12,
      },
      offset: isMobile ? -15 : -20,
      anchor: 'end',
      formatter: (value, context) => data.datasets[context.datasetIndex].displayValue[context.dataIndex],
      display: 'auto',
      align: 'start',
    },
  },
  scales: {
    yAxes: [{
      ticks: {
        display: true,
        fontColor: '#c8c8c8',
        fontSize: isMobile ? 8 : 12,
        fontFamily: 'Futura Book',
        beginAtZero: true,
      },
      gridLines: {
        drawBorder: false,
      },
      scaleLabel: {
        display: true,
        labelString: yAxisDisplayLabel,
      },
    }],
    xAxes: [{
      categoryPercentage: isMobile ? 0.8 : 0.7,
      barPercentage: 1,
      gridLines: {
        display: false,
        drawBorder: false,
      },
    }],
  },
  legend: {
    display: false,
  },
  scaleBeginAtZero: true,
});
1
chart.js

1 Answers

0
votes

The simple, non-technical, answer is of course to write Unit: €/m2 somewhere else on the chart and not an every bar.