Chart.js Chartjs:使用Datalabels插件时重叠值

Chart.js Chartjs:使用Datalabels插件时重叠值,chart.js,Chart.js,我正在使用datalabels插件,如果值太长,则会重叠: 我试着在插件数据标签下使用diaply auto,但它仍然重叠,有什么办法使它们不重叠吗 以下是我的选择: const getOptions = (yAxisDisplayLabel, data, previousOpts, isMobile) => ({ ...previousOpts, layout: { padding: { top: 20, }, }, plugins: {

我正在使用datalabels插件,如果值太长,则会重叠:

我试着在插件数据标签下使用diaply auto,但它仍然重叠,有什么办法使它们不重叠吗

以下是我的选择:

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,
});

简单、非技术性的答案当然是在图表上的其他地方写上单位:€/m2,而不是每一条