CODEWITHSUNDEEP
angularchart.js
Nesbox314
Nesbox314

Reputation: 23

Some bars of the bar graph are disappearing from Chart.js

I am trying to make a chart using Chart.js, I am making a bar chart, and simply by adding some data, some of these bars disappear. I realized that this SOMETIMES happens when I put equal values in the date fields. Can someone help me? Please?

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Janeiro", "Fevereiro", "Março", "Abril"],
      datasets: [
          {
              label: "Indicados",
              yAxisID: 'yAxis1',
              backgroundColor: "#56D9FE",
              data: [5,3,3,4]
          },
          {
              label: "Instalados",
              yAxisID: 'yAxis1',
              backgroundColor: "#5FE3A1",
              data: [3,4,6,4]
          },
          {
              label: "Vendas",
              yAxisID: 'yAxis2',
              backgroundColor: "#A3A0FB",
              data: [50, 45, 80, 60]
          },
          {
              label: "Bônus",
              yAxisID: 'yAxis2',
              backgroundColor: "#FEC163",
              data: [30, 10, 25, 35],
          }
      ]
    },
    options: {
      responsive: true, //responsividade
      maintainAspectRatio: true,
      lineWidth: 0.1,
      aspectRatio: 3, //tamanho
      legend: {
        display: true,
        position: 'bottom' // Posição das legendas
      },
      scales: {
          yAxes: [
              {
                  id: 'yAxis1',
                  position: 'left'
              },
              {
                  id: 'yAxis2',
                  position: 'right'
              }
          ]
      }
    }

  });

This is the buggy chart

Upvotes: 2

Views: 1424

Answers (1)

Alien
Alien

Reputation: 258

You don't need to specify yAxis to datasets(It'll be good way what you have done if you have 2 datasets only), it will be there anyway,you are adding data to yAxis in case that you are creating vertical chart, it's only overwriting your data in this case. Remove yAxisID: 'yAxis1' and yAxisID: 'yAxis2' from datasets. It'll work.

What you need is: 

   ticks: {
       max: 80,
       min: 0
   }

Add this to your yAxis conf, it'will look like:

scales: {
      yAxes: [
          {
              id: 'yAxis1',
              position: 'left',
              ticks: {
                  max: 80,
                  min: 0
              }
          },
          {
              id: 'yAxis2',
              position: 'right',
              ticks: {
                  max: 80,
                  min: 0
              }
          }
      ]
  }

Upvotes: 1

Related Questions