'ChartJS Data-label cropped

I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?

For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)

Chart.register(ChartDataLabels); // Import the data-labels plugin

graphItop4 = new Chart(document.getElementById("mois"), {
  type: "line",
  data: {
    labels: [1, 2],
    datasets: [{
        label: "1",
        fill: true,
        data: [0, 1234],
        backgroundColor: "rgba(0, 0, 255, 0.2)",
        borderColor: "blue",
        borderWidth: 1,
        datalabels: {
          align: 'start',
        }
      },
    ]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor.replace("0.2", "0.5");
        },
        borderRadius: 100,
        color: 'white',
        font: {
          weight: 'bold',
          size: '15'
        },
        formatter: Math.round,
        padding: 5,
      }
    },
  },
})
body {
  font-family: "Arial", Helvetica, sans-serif;
  display: flex;
  margin: 18px;
  padding: 0;
  background-color: #ccc;
}

.case {
  position: relative;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  min-height: 240px;
  background-color: #fff;
}

h2 {
  font-size: 1.4em;
  margin: 0;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: lightgrey;
}
<div class="case">
  <h2>Mois</h2>
  <div>
    <canvas height="270" id="mois" width="600"></canvas>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source