Setting Chart Appearance from Code Behind in MS Chart

Today we will set see how to set appearance of chart control and chart area within the control. We will set chart area shadow offset to make it look like its shadow is dropping on the back, define two colors for each chart and chart area so we can apply gradient effect on back color of chart, define border of chart area to show where chart area end, define direction of chart and chart area's gradient direction.

This is what it's going to look like:

So to get started, lets drop a chart control on aspx page like this:

<asp:Chart ID="Chart1" runat="server">


<asp:Series Name="Series1" CustomProperties="DrawingStyle=Emboss">




<asp:ChartArea Name="ChartArea1">





Code behind (I have commented the areas so you can relate properties to its result):

protected void Page_Load(object sender, EventArgs e)


// Populate chart with some fictional numbers

//(please note that these values does not represent actual

// figure and are present here for demo purposes only)

Dictionary<string, int> xyValues = new Dictionary<string, int>();

xyValues.Add("Silverlight", 60);

xyValues.Add("Flash", 30);

xyValues.Add("JavaFX", 10);


// Binding chart's default series' point to key value pair of demo data

Chart1.Series[0].Points.DataBindXY(xyValues.Keys, xyValues.Values);


//Disable major x-Axis lines from chart

Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;


//setting chart's border style

Chart1.BorderSkin.SkinStyle = System.Web.UI.DataVisualization.Charting.BorderSkinStyle.Emboss;


//setting chart's back color

Chart1.BackColor = System.Drawing.Color.BlanchedAlmond;


// setting chart secondary color for gradient effect

Chart1.BackSecondaryColor = System.Drawing.Color.LightYellow;


// setting chart gradient direction

Chart1.BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.TopBottom;


// setting chart area back color

Chart1.ChartAreas[0].BackColor = System.Drawing.Color.LightYellow;


// setting chart area back secondary color

Chart1.ChartAreas[0].BackSecondaryColor = System.Drawing.Color.BlanchedAlmond;


// setting chart area gradient direction

Chart1.ChartAreas[0].BackGradientStyle = System.Web.UI.DataVisualization.Charting.GradientStyle.TopBottom;


// setting chart area shadow offset to drop shadow on chart

Chart1.ChartAreas[0].ShadowOffset = 5;


// setting chart area border style

Chart1.ChartAreas[0].BorderDashStyle = System.Web.UI.DataVisualization.Charting.ChartDashStyle.Solid;


//setting chart area border width

Chart1.ChartAreas[0].BorderWidth = 1;






Tags: , ,

ASP.NET | MS Chart