[Chartjs]-ChartJS Y-Axis scale value wrong

by

0👍

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>

Leave a comment