I was facing problem in adjusting the asp:Chart Axis labels font and intervals and found it very difficult to customize them. In this article, we are going to learn how to customize the asp:Chart control X or Y axis labels, its appearance and the intervals of the Label etc.
Introduction
After introduction of Chart in ASP.NET, its very easy for us as a developer to incorporate charts in our web pages, however customizing the look and feel of the charts such as X and Y axis labels doesn't seem to be straight forward.
In case you are not familiar with asp:Chart control, refer to
this article.
Using the code
To demonstrate how to customize the asp:Chart Labels, background colors, intervals etc. I have created a sample page with an asp:Chart control in which data comes in from a XML file.
My XML data looks like below
<?
xml version="1.0" encoding="utf-8" ?>
<
Country>
<
Population Year="2001" Value="10000"/>
<
Population Year="2002" Value="20000"/>
<
Population Year="2003" Value="22000"/>
<
Population Year="2004" Value="24000"/>
<
Population Year="2005" Value="20000"/>
<
Population Year="2006" Value="25000"/>
<
Population Year="2007" Value="27000"/>
<
Population Year="2008" Value="15000"/>
<
Population Year="2009" Value="18000"/>
<
Population Year="2010" Value="19000"/>
<
Population Year="2011" Value="20000"/>
<
Population Year="2012" Value="25000"/>
<
Population Year="2013" Value="35000"/>
<
Population Year="2014" Value="45000"/>
</
Country>
The ASPX page contains following
asp:Chart control code in which we are specifying ChartType as "
Bar" and respective X axis and Y axis field value from the xml file.
<
asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1" ChartType="Bar" XValueMember="Year" YValueMembers="Value">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="false">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
with following as the code behind.
protected
void Page_Load(object sender, EventArgs e)
{
DataSet dSet =
new DataSet();
dSet.ReadXml(Server.MapPath(
"~/XMLData.xml"));
Chart1.DataSource = dSet.Tables[0];
Chart1.DataBind();
}
In the above code snippet, we are reading the XML file into DataSet and setting the DataSource of the Chart to the the DataSet and calling the DataBind method that binds the chart with data coming in from the DataSet.
Bringing all labels of the Chart
In the above code snippet, you may notice that there are many bars but X axis has only two labels "2010" and "2005", this is because asp.net automatically adjust the labels according to the size of the chart. However in some scenario, it may be difficult for the user to understand the chart properly, like in above case. To overcome this, we need to set the Interval property of the respective Axis of the ChartArea something like below.
Chart1.ChartAreas[0].AxisX.Interval = 1;
Setting Interval to "1" gives all Labels of the respective axis.
Customizing the X and Y axis label fonts
To customize the X and Y axis label fonts, we need to set the LabelStyle property of the respective Axis from the Chart area, like below
// to change the Label font style set the font
Chart1.ChartAreas[0].AxisX.LabelStyle.Font =
new System.Drawing.Font("Verdana", 12f);
Chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = System.Drawing.Color.Red;
In the above code snippet, we have set the X axis label font to "Verdana" and font size as 12 point where Y axis font color is set to red.
Changing the background color of the Chart area
In case you want to change the background color of the Chart area, you can do so by setting the BackColor of the ChartArea.
// Changing the backgroud color of the charting area
Chart1.ChartAreas[0].BackColor = System.Drawing.Color.PowderBlue;
To set the GradientStyle, you can set the BackGradientStyle property something like below, where GradientStyle.TopBottom is the enum that has several values like Center, BottomTop etc.
Chart1.ChartAreas[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.TopBottom;
If you are not interested to give gradient effect to the background, simply ignore above code snippet.
Setting background image for the ChartArea
Setting background image of the Chart area is as simple as setting the path of the image to the BackImage property. Remember that the path of the image should be virtual path, you can't give path to the external image.
Chart1.ChartAreas[0].BackImage =
"~/DotNetLogo.gif";
My complete code snippet, looks something like below
protected
void Page_Load(object sender, EventArgs e)
{
DataSet dSet =
new DataSet();
dSet.ReadXml(Server.MapPath(
"~/XMLData.xml"));
// if all values labels are not displaying, set the interval for AxisX or AxisY
Chart1.ChartAreas[0].AxisX.Interval = 1;
// to change the Label font style set the font
Chart1.ChartAreas[0].AxisX.LabelStyle.Font =
new System.Drawing.Font("Verdana", 12f);
Chart1.ChartAreas[0].AxisY.LabelStyle.ForeColor = System.Drawing.Color.Red;
// Changing the backgroud color of the charting area
Chart1.ChartAreas[0].BackColor = System.Drawing.Color.PowderBlue;
// Chart1.ChartAreas[0].BackImage = "~/DotNetLogo.gif";
Chart1.ChartAreas[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.TopBottom;
Chart1.DataSource = dSet.Tables[0];
Chart1.DataBind();
}
Hope this article would be helpful for those looking for customization of the asp:Chart control.
Thanks for reading and feel free to let me know your comments suggestions on the article.