[Chartjs]-ChartJS yAxis showing not coherent data

by

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>

Leave a comment