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.
Unfortunately, activation email could not send to your email. Please try again.

Set chart height dynamically based on how much data it contains

Thread ID:





130338 May 8,2017 03:29 AM May 9,2017 09:28 AM ASP.NET Web Forms 1
Tags: Chart
Asked On May 8, 2017 03:29 AM


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.

Dharanidharan Dharmasivam [Syncfusion]
Replied On May 9, 2017 09:28 AM

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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.