ChartJS Y-Axis scale value wrong

Question

I have a chart and the y axis scale seems to be wrong.

Here is the data put in.

data: {
        labels: [1, 2, 3, 4, 5, 6],
        datasets: [
                     {
                        label: '911',
                        lineTension: 0,
                        fill: false,
                        borderColor: '#4cfbb3', // (random) 
                        data: [ 10381, 11381, 19381, 19381, 2381 ]
                     }
                  ]
      }

Chart:

As you can see, respectively the data for day 1 should be graphed at around 10k, on the chart its just above 6k. Also, the highest value is 19381, which is even there twice and on the chart it shows highest value is right on 12k.

I cant exactly set the scale hard coded, as this data scale changes all the time. Here is the rest of the json:

{
      type:'line',
      data:{
        labels:[],
        datasets:[]
      },
      options:{
        legend: {
          display: true,
          position: 'top',
          fontColor: 'white',
          fontSize: 20,
          labels: {
            fontColor: 'white',
            fontSize: 20
          }
        },
        responsive: true,
        scales: {
          yAxes: [{
            stacked: false,
            scaleLabel: {
              display: true,
              fontColor: 'white',
              fontSize: 25,
              labelString: 'Faction Points'
            },
            ticks: {
              fontColor: 'white',
              fontSize: 20,
              min: 0
            }
          }],
        xAxes: [{
          stacked: false,
          scaleLabel: {
            display: true,
            fontColor: 'white',
            fontSize: 25,
            labelString: 'Day'
          },
          ticks: {
            fontColor: 'white',
            fontSize: 20,
            min: 0
          }
        }]
        }
      }
    }

Any help on how to fix this would be greatly appreciated, thanks!

Answer 1

Given your code, I just only added changed the color of yAxis.gridLines to better visualize where exactly the different points are located. To me, this looks fine. Please also post your CSS definitions.

yAxes: [{
  ...
  gridLines: {
    color: 'white'
  }

 new Chart("scurve_chart", { type: 'line', data: { labels: [1, 2, 3, 4, 5, 6], datasets: [{ label: '911', lineTension: 0, fill: false, borderColor: '#4cfbb3', // (random) data: [10381, 11381, 19381, 19381, 2381] }] }, options: { legend: { display: true, position: 'top', fontColor: 'white', fontSize: 20, labels: { fontColor: 'white', fontSize: 20 } }, responsive: true, scales: { yAxes: [{ stacked: false, scaleLabel: { display: true, fontColor: 'white', fontSize: 25, labelString: 'Faction Points' }, ticks: { fontColor: 'white', fontSize: 20, min: 0 }, gridLines: { color: 'white' } }], xAxes: [{ stacked: false, scaleLabel: { display: true, fontColor: 'white', fontSize: 25, labelString: 'Day' }, ticks: { fontColor: 'white', fontSize: 20, min: 0 } }] } } });

 div { background-color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <div> <canvas id="scurve_chart"></canvas> </div>