ChartJS yAxis showing not coherent data

Question

I'm trying to show some data from my API in a Bar Chart with latests ChartJS.

After initializing my Chart i have a function which get the data from API and set it in the Chart.

The issue is that yAxis is showing not coherent data, like data inside the chart has values like 9000, 1050.. while the axis only shows 0 1 2 3...

Here an example:

const optionsPagamentiBar = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      mode: "index",
      intersect: 0,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    }
  },
  scales: {
    y: {
      ticks: {
        display: true,
        beginAtZero: true,
        fontSize: 10,
        stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        drawBorder: false,
        zeroLineColor: "transparent",
      }
    },
    x: {
      display: 1,
      ticks: {
        padding: 10,
        display: true,
        fontSize: 10
      },
      grid: {
        display: false
      }
    }
  }
}

const chartBarPayments = new Chart(document.getElementById("chartBarPayments").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
    }]
  },
  options: optionsPagamentiBar
});
// this data is get from API
const data = {
  "labels": [
    "08:48",
    "08:53",
    "08:55",
    "09:20",
    "09:36",
    "10:18",
    "11:50"
  ],
  "datasets": [{
      "label": "Visa+bancom",
      "data": "9395.45",
      "backgroundColor": "rgb(255, 64, 64)"
    },
    {
      "label": "CONTANTI",
      "data": "6566.54",
      "backgroundColor": "rgb(224, 7, 152)"
    },
    {
      "label": "Arrot. l96/17",
      "data": "-0.05",
      "backgroundColor": "rgb(145, 10, 228)"
    },
    {
      "label": "gift",
      "data": "19.32",
      "backgroundColor": "rgb(57, 70, 255)"
    },
    {
      "label": "RESI",
      "data": "130.83",
      "backgroundColor": "rgb(5, 160, 218)"
    },
    {
      "label": "L.96/17",
      "data": "-0.01",
      "backgroundColor": "rgb(13, 233, 137)"
    },
    {
      "label": "SATISPAY",
      "data": "55.53",
      "backgroundColor": "rgb(77, 254, 51)"
    }
  ]
}


chartBarPayments.data = data;
chartBarPayments.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<canvas id="chartBarPayments"></canvas>

Answer 1

This is because you define your data as strings while chart.js expects arrays with numbers for your kind of axis, changing this will make it show correctly

const optionsPagamentiBar = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      mode: "index",
      intersect: 0,
      usePointStyle: true,
      callbacks: {
        label: function(context) {
          return context.dataset.label + ": " + "€" + context.dataset.data.replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
        }
      }
    }
  },
  scales: {
    y: {
      ticks: {
        display: true,
        beginAtZero: true,
        //fontSize: 10,
        //stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        drawBorder: false,
        zeroLineColor: "transparent",
      }
    },
    x: {
      display: 1,
      ticks: {
        padding: 10,
        display: true,
        fontSize: 10,
        stepSize: 1,
        callback: function(value, index, values) {
          return "€" + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
      },
      grid: {
        display: false
      }
    }
  }
}

const chartBarPayments = new Chart(document.getElementById("chartBarPayments").getContext('2d'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
    }]
  },
  options: optionsPagamentiBar
});
// this data is get from API
const data = {
  "labels": [
    "08:48",
    "08:53",
    "08:55",
    "09:20",
    "09:36",
    "10:18",
    "11:50"
  ],
  "datasets": [{
      "label": "Visa+bancom",
      "data": [9395.45],
      "backgroundColor": "rgb(255, 64, 64)"
    },
    {
      "label": "CONTANTI",
      "data": [6566.54],
      "backgroundColor": "rgb(224, 7, 152)"
    },
    {
      "label": "Arrot. l96/17",
      "data": [-0.05],
      "backgroundColor": "rgb(145, 10, 228)"
    },
    {
      "label": "gift",
      "data": [19.32],
      "backgroundColor": "rgb(57, 70, 255)"
    },
    {
      "label": "RESI",
      "data": [130.83],
      "backgroundColor": "rgb(5, 160, 218)"
    },
    {
      "label": "L.96/17",
      "data": [-0.01],
      "backgroundColor": "rgb(13, 233, 137)"
    },
    {
      "label": "SATISPAY",
      "data": [55.53],
      "backgroundColor": "rgb(77, 254, 51)"
    }
  ]
}


chartBarPayments.data = data;
chartBarPayments.update();

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>

<canvas id="chartBarPayments"></canvas>