[Chartjs]-Chart.js cuts data points to half

by

3👍

✅

No idea why, but defining y.beginAtZero: true instead of y.min: 0 will solve the problem.

Please take a look at your amended and runnable code and see how it works.

new Chart('websitecalls_chartel', {
  type: 'line',
  data: {
    labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
    datasets: [{
      label: 'Websitecalls',
      data: [0, 0, 0, 0, 0, 0, 0],
      borderWidth: 2,
      borderColor: '#00000',
      backgroundColor: '#ffff',
      pointStyle: 'circle',
      pointRadius: 7,
      cubicInterpolationMode: 'monotone',
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        }
      },
      y: {
        beginAtZero: true,
        ticks: {
          precision: 0,
          font: {
            family: 'Montserrat',
          },
        },
        grid: {
          borderDash: [5, 5],
        }
      },
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>

Chart.js documentation states…

  • beginAtZero: if true, scale will include 0 if it is not already included.
  • min: user defined minimum number for the scale, overrides minimum value from data.

Leave a comment