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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Set chart height dynamically based on how much data it contains

Thread ID:





130338 May 8,2017 07:29 AM UTC May 9,2017 01:28 PM UTC ASP.NET Web Forms 1
Tags: Chart
Asked On May 8, 2017 07:29 AM UTC


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 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon