CODEWITHSUNDEEP
javascripthtmlchartschart.js
Kiran
Kiran

Reputation: 916

Chart.js identification of min and max value before rendering

I am using chart.js for my project. As you can see in the following code, chart.js uses different minimum and maximum values for y-axis for line and bar graphs for same data. In the given code, 1100-1700 is the value range for line graph whereas 0-2000 is the value range used for bar graph.

I like to make same minimum and maximum values for both line and bar graphs. One option is to find minimum, maximum and step-size values my own and use the properties min, max and ticks.stepSize under scales. But finding minimum, maximum and step-size for a given data data is a serious task.

For my requirement, default minimum ,maximum and stepSize used by chart.js for line graph is fine and I would like to use the same values for bar graph also.

I could first render line graph, get these values from this graph (like scales.y.min) and then use it for bar graph, which is perfectly working

Is there a way I could get the default min, max, stepSize values used by chart.js for line graph before actually drawing the graph? Any answers or pointers are really appreciated. Thanks

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

var chart2 = new Chart(document.getElementById('chart2'),
{
  type: 'bar',
  data: 
  {
       labels: ['a','b','c'],
       datasets:  
       [
              {
                label: 'A',     
                data: [1212,1122, 1188, 1617, 1116],
                backgroundColor: 'green',                  
              }
       ]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>



<div style="width:300px;height:200px"><canvas id="chart1"></canvas></div>

<div style="width:300px;height:200px"><canvas id="chart2"></canvas></div>

Upvotes: 0

Views: 1053

Answers (1)

user2057925
user2057925

Reputation: 2653

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/[email protected]/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>

Upvotes: 1

Related Questions