Something nice again today, one of our clients had an issue with the way a graph was showing its data. The issue is the fixed height of the radchart. At first it did have a fixed height, but that has two problems. One is displayed here on these images:

Now imagine this moving forward to about 40 to 50 bars in the graph… that was the issue reported by our client. The data wouldn’t fit inside the rectangle the graph was rendering.

I wanted to solve two things here:

    - The height must be dynamic (depending no how many bars are showing)

    - The bars must all have the same height to keep things uniform.

Since all my data is loaded at Page_Load that’s the place I’m going to address this.

I know how many bars will be rendered in advance which is the first number in my calculation. The second number I need is the amount of dead space between the edge of the chart and the area where the bars are drawn.

The second number of our calculation is found using the IE ruler (Press F12, go to Tools). I measure from the topmost border of the chart to the edge of the area where the bars are drawn. I found that with my chart setup the gap is 65 pixels

Now for the fix. Say I have 2 bars that need rendering and I want each bar to be 25 pixels high. In the event where my data is bound to the grid I set the height to:

<numberOfBars (2)> * 25 + 65 = 115px

Translating that to code:

uxChart.Height = new Unit((dataItems.Count() * 25) + 65);

(dataItems is my charts datasource.)

In my case, this will give me this:

Of even with three bars:

The RadChart now scales correctly no matter how many bars I need to display. It will just keep on growing according to the amount of bars.