The KaxChart control from our ASP.NET AJAX SDK is a professional and business-oriented charting component. To help users create a fully customized, richly styled and user friendly chart in the easiest and fastest way, this KaxChart control embeds a number of unique features to increase the intuitiveness and readability of created web chart. In this article, we will offer a detailed instruction of C# demo sample on one of above mentioned features, auto layout.

The main function of this auto layout chart feature is to ensure all chart elements can be clearly viewed by calculating the layout automatically. To put it in another way, to prevent one chart element being overlapping with one another, users can use this auto layout feature for best utilization of the whole chart area. In conclusion, the chart auto layout feature has the ability to make all chart elements be fully readable. Here you can view out free auto layout online demo

In above section, we have briefly introduced the functionality of the auto layout feature. And in this section, we will show you how to use this chart feature by offering the programming codes in your asp.net application.

Here we attach two snippets of codes, one is for how to define this auto layout property in aspx page and the other is to auto layout the chart using C#.NET code.

<kettic:KaxChart  ID="KaxChart1"  runat="server"  Skin="KetticStyle"   IsAutoLayout="true" >        
</kettic:KaxChart>

KaxChart1.IsAutoLayout = true;

In order to make you have a more direct understanding of this auto layout chart feature, here we attach two images which aim to show the comparison of the results for using the auto layout feature or not.

Following is a screen shot of the result when setting the auto layout property to true. And in this example, you will see that all the chart elements have been perfectly arranged.

And this picture shows the output when turning off the function of this auto layout feature. You can find the html chart title is position to the left, and the legend label even overlap to the plot area.

From above two images, you will see that the position of chart title and legends are changed when defining different values for the auto layout property. And in the example with Auto-Layout = False, the chart elements have overlapped on each other which largely induce the readability of the chart. So if you want to make your ajax web chart in better performance with chart distribution, you need the advantage property "IsAutoLayout".