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

by

3👍

✅

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

Leave a comment