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

Question

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

At the provided URL, using the same filter, I receive an empty chart. — rozsazoltan, Jun 16 '23 at 12:58

rozsazoltan · Accepted Answer · 2023-06-16T13:12:28.663

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

Example

console.log(0.1 + 0.2)

// would yield a good result: 0.3

// the actual result according to JavaScript: 0.30000000000000004

More information about floating-point stored numbers - 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/chart.js@4.3.0"></script>
<canvas id="ctx"></canvas>

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

I trying but this not work for me, can I replace value with mikeFWDataChart ? — Ben Johnson, Jun 16 '23 at 12:29
**The callback function can process three arguments because chart.js invokes the function with these three arguments: `value, index, values`. This is fixed.** So, for displaying the label of each data on the Y-axis, this callback function will be executed, and it will transform each value as you have encoded it. — rozsazoltan, Jun 16 '23 at 15:20
For example, with `return $ + value`, if the data on the Y-axis is `0, 1, 2, 3...`, then through the callback, they will become `$0, $1, $2, $3`, and so on. We haven't supplemented it with any text; instead, we rounded the value to two decimal places. What you're asking for doesn't make sense. **Please review the [documentation](https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats) I have provided!** — rozsazoltan, Jun 16 '23 at 15:20
As I mentioned in my response, if we round the values on the Y-axis to two decimal places using the callback function as follows: `return value.toFixed(2)`, then for inputs like `150.125, 200.2000000000005, ...` the values transformed by the callback will be: `150.13, 200.20, ...` — rozsazoltan, Jun 16 '23 at 15:24

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

1 Answers1