Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda