How can I round close values to one decimal place on y Axis in chart.js

In this url When I click on the marker on map and hide these three warning (yellow, orange and red) I see the values with too much numbers after decimal.

How can I show only one values after decimal.

    const a = new Chart(canvasElement, {
    data: {
      labels: mikeFWLabelChart,
      datasets: [{
        type: 'line',
        label: 'водно количество [куб. м./сек.]',
        data: mikeFWDataChart,
        pointRadius: 1,
        borderWidth: 2,
        borderColor: '#00b3ff',
        backgroundColor: "#00b3ff",
        pointBackgroundColor: "#00b3ff",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#00b3ff",
        pointHoverBorderColor: "#00b3ff",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'надморска височина [метри]',
        data: mike11DataChart,
        pointRadius: 1,
        borderWidth: 2,
        borderColor: '#86A3B8',
        backgroundColor: "#86A3B8",
        pointBackgroundColor: "#86A3B8",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#86A3B8",
        pointHoverBorderColor: "#0022ff",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение I',
        data: mikeYellowWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#eeff00',
        backgroundColor: "#eeff00",
        pointBackgroundColor: "#eeff00",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#eeff00",
        pointHoverBorderColor: "#eeff00",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение II',
        data: mikeOrangeWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#ff8400',
        backgroundColor: "#ff8400",
        pointBackgroundColor: "#ff8400",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff8400",
        pointHoverBorderColor: "#ff8400",
        showToolTips: false,
      }, {
        type: 'line',
        label: 'предупреждение III',
        data: mikeRedWarning,
        pointRadius: 1,
        borderWidth: 3,
        borderColor: '#ff0000',
        backgroundColor: "#ff0000",
        pointBackgroundColor: "#ff0000",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff0000",
        pointHoverBorderColor: "#ff0000",
        showToolTips: false,
      },]
    },
    options: {

        responsive: true,
        maintainAspectRatio: false,
        plugins: {
        annotation: {
        annotations: [
                          {
                            type: "line",
                            xMin: vert_line_darprog,
                            xMax: vert_line_darprog,
                            borderColor: "#8a9c9d",
                            label: {
                              backgroundColor: 'rgba(0,0,0,0)',
                              color: '#8a9c9d',
                              padding: 2,
                              content: 'Дата на прогнозата (GMT+2)',
                              enabled: true,
                              display: true,
                              position: 'end',
                              textAlign: 'center',
                              xAdjust: -9,
                              rotation: 270
                            }
                          },
                          {
                            type: "line",
                            xMin: vert_line_GMT2,
                            xMax: vert_line_GMT2,
                            borderColor: "#aab7b8",
                            label: {
                              backgroundColor: 'rgba(0,0,0,0)',
                              color: '#aab7b8',
                              padding: 2,
                              content: 'Актуален час в момента (GMT+2)',
                              enabled: true,
                              display: true,
                              position: 'end',
                              textAlign: 'center',
                              xAdjust: 9,
                              rotation: 270
                            }
                          }
                        ]
        }
        },
      scales: {
        x: {
          ticks: {
              maxRotation: 90,
              minRotation: 90, 
              
          }
      }, y: {
        ticks: {
           
        }
    }
      }
    }
  })
};

When the first numbers are the same and the numbers after the decimal point are different, they come out with too many numbers. For example:

200.2000000000005 200.2000000000003

Solution

You have too many fractions that become large decimal numbers due to JavaScript's floating-point storage.

console.log(0.1 + 0.2)

// would yield a good result: 0.3

// the actual result according to JavaScript: 0.30000000000000004

Is floating-point math broken? - StackOverflow Answer (Community Wiki)
How can I deal with floating point number precision in JavaScript? - StackOverflow Answer

Using the Math.round() or .toFixed() function can provide a solution. Therefore, you need to manipulate the values displayed on the Y-axis.

To manipulate the Y-axis value, use the callback property.

const chart = new Chart(ctx, {
  options: {
    scales: {
      y: {
        ticks: {
          autoSkip: true,
          // Mannipulate value by function
          callback: function (value, index, values) {
            return value.toFixed(2); // Get rounding to 2 decimal places
          },
        },
      },
    },
  },
})

const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["First", "Second", "Third"],
    datasets: [
      {
        type: "line",
        label: "водно количество [куб. м./сек.]",
        data: [0.1241221424, 1.213213213123, 3.4354353453],
        pointRadius: 1,
        borderWidth: 2,
        borderColor: "#00b3ff",
        backgroundColor: "#00b3ff",
        pointBackgroundColor: "#00b3ff",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#00b3ff",
        pointHoverBorderColor: "#00b3ff",
        showToolTips: false,
      },
      {
        type: "line",
        label: "надморска височина [метри]",
        data: [3.53453453, 2.3123215322352, 0.3213215423535],
        pointRadius: 1,
        borderWidth: 2,
        borderColor: "#86A3B8",
        backgroundColor: "#86A3B8",
        pointBackgroundColor: "#86A3B8",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#86A3B8",
        pointHoverBorderColor: "#0022ff",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение I",
        data: [5.324125345345, 1.32131232145151, 6.321321514134],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#eeff00",
        backgroundColor: "#eeff00",
        pointBackgroundColor: "#eeff00",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#eeff00",
        pointHoverBorderColor: "#eeff00",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение II",
        data: [2.21342142141, 0.234325326, 1.32142352512],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#ff8400",
        backgroundColor: "#ff8400",
        pointBackgroundColor: "#ff8400",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff8400",
        pointHoverBorderColor: "#ff8400",
        showToolTips: false,
      },
      {
        type: "line",
        label: "предупреждение III",
        data: [50.234235231, 10.2141251125, 20.324235236],
        pointRadius: 1,
        borderWidth: 3,
        borderColor: "#ff0000",
        backgroundColor: "#ff0000",
        pointBackgroundColor: "#ff0000",
        pointBorderColor: "rgba(255, 255, 255, 0)",
        pointHoverBackgroundColor: "#ff0000",
        pointHoverBorderColor: "#ff0000",
        showToolTips: false,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      annotation: {
        annotations: [
          {
            type: "line",
            xMin: "First",
            xMax: "Third",
            borderColor: "#8a9c9d",
            label: {
              backgroundColor: "rgba(0,0,0,0)",
              color: "#8a9c9d",
              padding: 2,
              content: "Дата на прогнозата (GMT+2)",
              enabled: true,
              display: true,
              position: "end",
              textAlign: "center",
              xAdjust: -9,
              rotation: 270,
            },
          },
          {
            type: "line",
            xMin: "First",
            xMax: "Third",
            borderColor: "#aab7b8",
            label: {
              backgroundColor: "rgba(0,0,0,0)",
              color: "#aab7b8",
              padding: 2,
              content: "Актуален час в момента (GMT+2)",
              enabled: true,
              display: true,
              position: "end",
              textAlign: "center",
              xAdjust: 9,
              rotation: 270,
            },
          },
        ],
      },
    },
    scales: {
      x: {
        ticks: {
          maxRotation: 90,
          minRotation: 90,
        },
      },
      y: {
        ticks: {
          autoSkip: true,
          // Mannipulate value by function
          callback: function (value, index, values) {
            return value.toFixed(2); // Get rounding to 2 decimal places
          },
        },
      },
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="ctx"></canvas>

Axis Properties - options.scales[].ticks.callback - Chart.js Docs
Axis Properties - Custom Ticks - Chart.js Docs