Cylinder Chart with Directional Axis and Axis Title in MS Chart

Often you want to change appearance of your column chart to cylinder or emboss or something else. It's quite easy to change chart series appearance in MS Chart just by setting few properties.

Today we will see how to convert column chart to cylinder chart, show directional axis arrows and title for both x axis and y axis.

So in order to get started lets first set our chart control and then set few properties. (Later in this article we will see what those properties mean):

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

<Series>

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

</asp:Series>

</Series>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

<AxisY ArrowStyle="SharpTriangle" Title="Browser Usage">

<MajorGrid Enabled="False" />

</AxisY>

<AxisX ArrowStyle="SharpTriangle" Title="Browser Name">

<MajorGrid Enabled="False" />

</AxisX>

</asp:ChartArea>

</ChartAreas>

<BorderSkin SkinStyle="Emboss" />

</asp:Chart>

 

So what do we have here:

  1. If you notice we have CustomProperties defined in Series tag, which has value set as DrawingStyle=Cylinder, this mean that series that we would like to present in this chart will be drawn as Cylinder (There are other options too that you can set like: Emboss, LightToDark, Wedge)
  2. To set arrow head on Axis X and Axis Y: we will set property ArrowStyle = SharpTriangle (other options are: Triangle, Lines, None(no arrow head))
  3. To set Title of Axis X and Axis Y : we will set property Title="Your Text"

Code Behind to complete our code (This data is just for the demo purposes)

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

xyvalue.Add("FireFox",25);

xyvalue.Add("IE",52);

xyvalue.Add("Chrome",18);

xyvalue.Add("Safari",5);

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

 

Alright so now this chart is ready to view in the browser:

Tags: , ,

ASP.NET | MS Chart