Set up Chart Diagram guide in ASP.NET, rich C# sample code for diagram axis, data grid, marking area and style

How to Put up Diagram of Chart control using C#

Home > How to > Chart Plot Area

What is diagram? To put it in a simple way, a diagram is the area where your data is plotted and displayed in chart. From this page, you will find introductions for several unique properties of diagram and the sample C# code to customize the settings of diagram. Please note, you need run the demo code below in VS 2010+.

Diagram Unique Properties

In this part, we will talk about three unique properties that diagram element has owned, which are XAxis & YAxis, data grid and marking area. To change these definitions to render a specially network chart.

C# Code to Set XAxis & YAxis

Plot area has three axes, which are X axis and two axes (YAxis and YAxis2). And users are allowed to set different spacing and scaling measurements for each axis respectively. The value of axis spacing and scaling will change the chart size indirectly. You can view more guidance at chart axes.


KaxChart1.Diagram.AxisX.Visible = ChartAxisVisibility.True;
KaxChart1.Diagram.AxisX.MaxValue = 5;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;
KaxChart1.Diagram.AxisX.LayoutMode=Kettic.ASPX.Controls.Chart.Styles.ChartAxisLayoutMode.Normal;

KaxChart1.Diagram.AxisY.Visible = ChartAxisVisibility.True;
KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.Step = 0.5;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;

Sample C# Code to Set Data Grid

The data grid will display data series being compared in the chart in the form of a spreadsheet. And the data grid is often positioned below the chart. More information about data grid can be found at chart datagrid.


KaxChart1.Diagram.DataGrid.Visible = true;

C# Code to Customize Marking Area

The property marking area controls the background of the diagram. And each zone may be filled with different pre-defined colors. An area can contains only one mark or a range of marks, you have the full management to define it.


ChartMarkingArea markingArea = new ChartMarkingArea ();
            markingArea.ValueStartY = 0;
            markingArea.ValueEndY = 4;
            markingArea.StyleSet.Fill.MainColor = System.Drawing.Color.Red;
            KaxChart1.Diagram.MarkingAreas.Add(markingArea);

Diagram Appearance Properties

In this section, we will guide users to customize and tailor the property settings of diagram using sample C# code using our ASP.NET AJAX controls. And you can create customized web chart by changing the appearance style of diagram.

How to Resize the Diagram Using C# Code

The dimensions here are mainly responsible for the sizing properties of diagram. You can define the width, height, margins and paddings of diagram. Of course, you can use the property AutoSize to automatically resize the diagram based on its own data.


KaxChart1.Diagram.StyleSet.Dimensions.Width = 500;
            KaxChart1.Diagram.StyleSet.Dimensions.Height = 400;
            KaxChart1.Diagram.StyleSet.Dimensions.Margins.Bottom = 20;
            KaxChart1.Diagram.StyleSet.Dimensions.Margins.Left = 10;
            KaxChart1.Diagram.StyleSet.Dimensions.Margins.Top = 20;
            KaxChart1.Diagram.StyleSet.Dimensions.Margins.Right = 10;
            KaxChart1.Diagram.StyleSet.Dimensions.Paddings.Bottom = 0;
            KaxChart1.Diagram.StyleSet.Dimensions.Paddings.Left = 0;
            KaxChart1.Diagram.StyleSet.Dimensions.Paddings.Top = 0;
            KaxChart1.Diagram.StyleSet.Dimensions.Paddings.Right = 0;

How to Design Fill Style of Diagram in C#

You can use this property Fillstyle to fill diagram with selected color and in pre-defined type (solid, hatched, image, gradient).


KaxChart1.Diagram.StyleSet.Fill.FillMode = ChartFillMode.Solid;
KaxChart1.Diagram.StyleSet.Fill.PrimaryColor = System.Drawing.Color.Pink;

How to Set the Border of Diagram with C# Code

You can freely design the color, pen style and width of diagram border. And you are free to hide or display the diagram border.


            KaxChart1.Diagram.StyleSet.Border.Visible = true;
            KaxChart1.Diagram.StyleSet.Border.Width = 2;
            KaxChart1.Diagram.StyleSet.Border.Color = System.Drawing.Color.Black;

Customize the Shadow of Diagram Using C#

You can use Shadow to define shadow color, shadow color opacity and shadow distance and position relative to the plot area.


            KaxChart1.Diagram.StyleSet.Shadow.Blur = 0.5f;
            KaxChart1.Diagram.StyleSet.Shadow.Color = System.Drawing.Color.LightGray;
            KaxChart1.Diagram.StyleSet.Shadow.Distance = 1;

C# Code to Set the Corners

The Corners property is mainly responsible for the frame shape of diagram. The frame shape will be turning from square to round when the degree of rounding is increasing from 0 to larger values.


KaxChart1.Diagram.StyleSet.Corners.BottomLeft = CornerType.Round;
KaxChart1.Diagram.StyleSet.Corners.BottomRight = CornerType.Rectangle;
KaxChart1.Diagram.StyleSet.Corners.RoundSize = 5;

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control