Chart Feature Marking Areas guide for ASP.NET AJAX, C#, VB.NET, include marked zone value, style, border

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#

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

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