Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
chart.js cuts data points to half

I have a chart showing website calls the last 7 days. There it is:
chart
Here is the initialization:

varwebsitecalls_chart = 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: {
                min: 0,
                ticks: {
                    precision: 0,
                    font: {
                        family: 'Montserrat',
                    },
                },
                grid: {
                    borderDash: [5, 5],
                }
            },
        }
    },
});

Problem:
The Problem is that the chart cuts of the circles when the data is 0 because I set min to 0. I have to set min to 0 because negative websitecalls can not exist. If I do not set it -1 will be displayed. Is there a way to fix this designtechnical issue?

Thanks in advance,
Filip.

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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.
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!