CODEWITHSUNDEEP
javascriptchart.js
Sumin Oh
Sumin Oh

Reputation: 3

Chart.js: Why are there two y axes in my line graph?

I'm using chart.js to build a line graph. I can't figure out why there are two y-axes on my graph. I also tried changing the color of the tick labels to white but it isn't working either. Thanks for your help! Here's the preview of my code: https://codepen.io/suminohh/pen/vYROrEx

var xValues = ['6 am','8 am','10 am','12 pm','2 pm','4 pm','6 pm','8 pm','10 pm','12 am'];
        var yValues = [7,8,8,9,9,9,10,11,14,14,15];
        
        new Chart("myChart", {
          type: "line",
          data: {
            labels: xValues,
            datasets: [{
                fill: false,
              lineTension: 0,
              backgroundColor: "white",
              borderColor: "white",
              data: yValues,
            }]
          },
          options: {
            legend: {display: false},
            scales: {
                xAxes: [{ 
                    gridLines: {
                        color: 'white',
                        zeroLineColor: 'white',
                }}],
              yAxes: [
                {ticks: {
                    min: 6, 
                    max:16,
                },
                    color: 'white',
                },
                {gridLines: {
                        color: 'white', //give the needful color
                        zeroLineColor: 'white',
                    }},
            ],
            }
          }
        });

enter image description here

Upvotes: 0

Views: 98

Answers (1)

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31143

Because you have two axes defined for yAxes. Using proper indentation helps notice these:

yAxes: [
  {
    ticks: {
      min: 6, 
      max:16,
    },
    color: 'white',
  },
  {
    gridLines: {
      color: 'white', //give the needful color
      zeroLineColor: 'white',
    }
  },
],

See how after color you close the object and start another. Put them as one object and you won’t have two axes:

yAxes: [
  {
    ticks: {
      min: 6, 
      max:16,
    },
    color: 'white',
    gridLines: {
      color: 'white', //give the needful color
      zeroLineColor: 'white',
    }
  },
],

Upvotes: 1

Related Questions