We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set chart height dynamically based on how much data it contains


Is there a way to make the chart change it's size based on how much data is inserted?
For example we have a chart with horizontal bars, and want it to adjust it's size(height) based on how many bars there is to display.

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team May 9, 2017 01:28 PM UTC

Hi Viktor, 

Thanks for contacting Syncfusion support. 

We will calculate the size of axis title, chart title and legend, then with the balance area, chart will get rendered. And depends upon the points length and axis height (bar chart) the height of each point will be calculated. So it is not possible to achieve your requirement exactly.   

However, we have achieved your requirement as an workaround without chart title, axis title and legends. In the sample, in button click we have generated points and bind to chart data source and specified the height dynamically depends upon the length of the data source. In general, when single point is given to chart with height of 100px, then chart area will render 40 pixel with bar size 20 pixel approximately. With respect to this we have prepared a sample. Find the code snippet below. 


  <input type="button" id="1" value="Point 1" onclick="updatePoints(this.id)"/> 
  <input type="button" id="5" value="5 Points" onclick="updatePoints(this.id)" /> 
  <input type="button" id="50" value="50 Points" onclick="updatePoints(this.id)" /> 
  <input type="button" id="100" value="100 Points" onclick="updatePoints(this.id)" /> 
function updatePoints(id) { 
          var chart = $("#Chart1").ejChart("instance"), 
      //Get the points depends upon the input 
              data = getData(id), 
              chartArea = 40, 
              chartBounds = 60; 
          chart.model.series = []; 
     //Assign points to data source 
          chart.model.series.push({ dataSource: data, xName: "xValue", yName: "yValue" }) 
     //Specify the size of chart with respect to length of data source 
          chart.model.size.height = chartBounds + (chartArea * parseInt(id)); 
      function getData(count) { 
          var chartPoint = []; 
          for (var i = 1; i <= parseInt(count) ; i++) { 
              var y = Math.random() * 1 + 0; 
              chartPoint.push({ xValue: i, yValue: y }); 
          return chartPoint 

In this the chartBounds variable holds the sum of margin and axis labels height. If you render axis title or chart title, you need to sum those height to this variable. 

Screenshot with single point: 


Screenshot with 5 points: 

Sample for reference can be find from below link. 

Live Chat Icon For mobile
Up arrow icon