Chartjs-Chart.js identification of min and max value before rendering

by

1👍

✅

The first thing you could do is to set beginAtZero to false to Y axis of bar chart because is set to true by default:

https://github.com/chartjs/Chart.js/blob/v3.9.1/src/controllers/controller.bar.js#L636-L650

Then you can set the same scale config to both charts.

  options: { // options of charts
    scales: {
      y: {
        beginAtZero: false,
      }
    }
  }

var chart1 = new Chart(document.getElementById('myChart1'),
{
  type: 'line',
  data: 
  {
       labels: ['a','b','c'],
       datasets:  
       [
              {
                label: 'A',     
                data: [1212,1122, 1188, 1617, 1116],
                borderColor: 'green',                  
              }
       ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: false,
      }
    }
  }
});

var chart2 = new Chart(document.getElementById('myChart2'),
{
  type: 'bar',
  data: 
  {
       labels: ['a','b','c'],
       datasets:  
       [
              {
                label: 'A',     
                data: [1212,1122, 1188, 1617, 1116],
                backgroundColor: 'green',                  
              }
       ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: false,
      }
    }
  }
});
.myChartDiv {
  max-width: 300px;
  max-height: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart1" width="300" height="200"/>
    </div>
    <div class="myChartDiv">
      <canvas id="myChart2" width="300" height="200"/>
    </div>
  </body>
</html>

Leave a comment