I'm trying to do a weather app and used react-chart.js to do this image. My problem is that I would like to make the amplitude smaller (pic above), so that it looks similar to this.

This is my state that sets the data

 setChartData({
  labels: arr,
  datasets: [
    {
      data: allThreeHours,
       backgroundColor: `${temp === 'temp'? '#e9d8a6': '#5F4BB6'}`,
       borderColor: `${temp === 'temp'? '#ee9b00': '#86A5D9'}`,
      tension: 0.1,
      borderWidth: 4,
    },
  ],
  datalabels: {
    display: true,
    color: "white"
  }
}); 

 const options = {

responsive: true,
maintainAspectRatio: false,
animation: {
  easing: "easeInOutQuad",
  duration: 520,
},
scales: {
  x: {
    grid: {
      display: false,
    },
  },
  y: {
    grid: {
      display: false,
      drawBorder: false,
      steps: 10,
      stepValue: 50,
    },
    ticks: {
      display: false,
    },
  },
},
plugins: {
  title: {
    display: false,
    text: "Temperatures",
  },
  legend: {
    display: false,
    position: "bottom",
  },
  datalabels: {
    anchor: "end",
    align: "top",
   // formatter: Math.round,
    font: {
      weight: "bold",
    },
  },
},
elements: {
  point: {
    radius: 0,
  },
} };

As I understand it datalabels relies on datasets.data. So if you could push independent values to datalabels and manipulate the datasets.data array accordingly I feel that it might work. However, I did not find a way to do it so far. Thanks for reading!