$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Chart Feature Marking Areas in ASP.NET
Home > How to > Chart Marked Zones

Information to Marking Areas Chart Feature

What is marking areas chart feature? What is the biggest benefit of this marking areas chart feature? How to add marking areas to target web chart? This tutorial article is created to help users find answers to above three questions.
Marking areas refer to the areas that are created with labels, filled with colors and used to highlight certain ranges within the chart. The biggest feature of the marking areas is that they could easily and visually group data. To put it in another way, the marking areas can successfully divide the whole chart data points into several distinguishing groups. Here you can view our makring area free online demo.

Marking Areas Properties

The properties of marking areas can be fully customized. And here we list three properties that control the appearance, position, size and style of added marked zone.
  • Value: you can use this property to control where the marking area is located and how much area does the marked zone cover by defining the start and end points X and Y value pairs.
  • FillStyle: users can use this property to define the filltype and color of created marking areas.
  • Border: this property contains the attributes of Penstyle(like dash), color and width.
Note: by default, the marking areas will be displayed behind the chart series. By the way, the number of marked zones that is contained in one chart is not limited. And even within one chart, the appearance and other properties of each marking area can be totally different.

How to Add Marking Areas to Chart

In this part, we offer you the programming samples to modify marking areas in aspx page and to add marking areas to chart using Visual C# .NET programming code. If you meet any problem in testing above marking areas adding examples, please feel free to contact us.
set chart marking areas feature in asp.net ajax using c#

ASPX


<Diagram>
<MarkingAreas>
<kettic:ChartMarkingArea ValueStartY="0" ValueEndY="4">
<StyleSet Fill-PrimaryColor="red">
</StyleSet>
</kettic:ChartMarkingArea>
<kettic:ChartMarkingArea ValueStartY="4" ValueEndY="7" >
<StyleSet Fill-PrimaryColor="green">
</StyleSet>
</kettic:ChartMarkingArea>
<kettic:ChartMarkingArea ValueStartY="7" ValueEndY="10">
<StyleSet Fill-PrimaryColor="blue">
</StyleSet>
</kettic:ChartMarkingArea>
</MarkingAreas>
</Diagram>

C# Code


ChartMarkingArea MarkingArea1 = new ChartMarkingArea();
MarkingArea1.Visible = true;
MarkingArea1.ValueStartY = 0;
MarkingArea1.ValueEndY = 4;
MarkingArea1.StyleSet.Fill.FillMode = ChartFillMode.Solid;
MarkingArea1.StyleSet.Fill.PrimaryColor = System.Drawing.Color.Red;
KaxChart2.Diagram.MarkingAreas.Add(MarkingArea1);

ChartMarkingArea MarkingArea2 = new ChartMarkingArea();
MarkingArea2.Visible = true;
MarkingArea2.ValueStartY = 4;
MarkingArea2.ValueEndY = 7;
MarkingArea2.StyleSet.Fill.FillMode = ChartFillMode.Solid;
MarkingArea2.StyleSet.Fill.PrimaryColor = System.Drawing.Color.Green;
KaxChart2.Diagram.MarkingAreas.Add(MarkingArea2);

ChartMarkingArea MarkingArea3 = new ChartMarkingArea();
MarkingArea3.Visible = true;
MarkingArea3.ValueStartY = 7;
MarkingArea3.ValueEndY = 10;
MarkingArea3.StyleSet.Fill.FillMode =ChartFillMode.Solid;
MarkingArea3.StyleSet.Fill.PrimaryColor = System.Drawing.Color.Blue;
KaxChart2.Diagram.MarkingAreas.Add(MarkingArea3);
Note: In order to meet the basic needs of running the KaxChart control, please make sure that your ASP.NET web application has installed NET Framework 3.5 or above versions and that you have installed all the necessary dlls from our ASP.NET AJAX SDK into your ASP.NET web application.

Other Chart Feature Recommendations

ASP.NET AJAX UI Controls