Add Candle Chart to asp.net web page, rich CSharp sample code, setting style, title, orientation, data series, axis

How to Build CandleStick Chart Using C#

Home > How to > CandleStick Chart

If this is the first time for you to use KT.UI ASP.NET AJAX Chart SDK, you can refer to the detailed guides below to get acquainted with the creation and customization of web Candle stick chart graphs.

This page mainly focuses on the basic functionality and step by step guides on how to draw and define Candle chart within C#.NET chart project. To be specific, this article explains the concepts of stock chart creation, including setting data Candle, values, series, chart axes and many other properties.

In order to let users experience the AJAX programming technique in our chart products, we need to add a certain AJAX control item within chart creating application. And the specific operations for this step are dragging an "AjaxPanel" item into "aspx" file, contained in Toolbox window; afterwards, dragging another chart control into the added "AjaxPanel" object from Toolbox; at last modifying the chart attributes in "aspx.cs" file using C# codes

Please read following two sections carefully: chart basic settings and Candle settings.

Basic Settings

C# Demo Codes for Chart Type Setting

We can choose chart type in two methods after we have successfully added the chart control item.


KaxChart1.SeriesSet[0].View = ChartSeriesView. Candle;


KaxChart1.DefaultSeriesView = ChartSeriesView. Candle;

C# Demo Codes for Chart Style Setting

If we want to let the Candle chart be out of the ordinary, we can change the chart skin. KT.UI C# ASP.NET Chart controls offer robust and complete options for changing chart background, skin and template to fulfill different users' needs.

KaxChart1.Skin = "KetticStyle";

C# Demo Codes for Chart Title Setting

We can select and add a chart title according to the chart contents. Beside, KT.UI C# ASP.NET Chart SDK also supports customizing title element, such as invoking active region to add HTML attributes, tooltip and URL, defining title fill setting, adjusting title position, resizing and rotating the title, and more.


KaxChart1.Caption.Text = " Candle Chart";

C# Demo Codes for Chart Orientation

Candle chart can be displayed in vertical and horizontal pattern. We can choose either of the two based on our actual needs.

KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Candlestick Settings

How to Set Candle Chart Series with C# Codes

Let's see how to add sets of values to Candle chart in this part. As most of the chart types, there is no limitation on adding how many sets of data to Candle chart. You can insert multiple data series to the stock market chart, and the plot area of chart will show multiple lines of stock with historical trend just like the realtime value. The price value of stock shown can be in daily, weekly, monthly and yearly. What's more, you can set each data series to different color, so that the candle line will display with different color. This performance make you can read, recognize and analyze the stock line trend more easily. You can refer to following C# codes to add two series of data Candle to chart.


     ChartSeriesPoint point1 = new ChartSeriesPoint();
            point1.Value = 4;
            point1.Value2 = 5;
            point1.Value3 = 2;
            point1.Value4 = 6;
            this.KaxChart1.SeriesSet[0].Points.Add(point1);
            ChartSeriesPoint point2 = new ChartSeriesPoint();           
            point2.Value = 5;
            point2.Value2 = 4;
            point2.Value3 = 2;
            point2.Value4 = 6;
            this.KaxChart1.SeriesSet[0].Points.Add(point2);
            ChartSeriesPoint point3 = new ChartSeriesPoint();            
            point3.Value = 4;
            point3.Value2 = 5;
            point3.Value3 = 6;
            point3.Value4 = 2;
            this.KaxChart1.SeriesSet[0].Points.Add(point3);
            ChartSeriesPoint point4 = new ChartSeriesPoint();            
            point4.Value = 5;
            point4.Value2 = 4;
            point4.Value3 = 6;
            point4.Value4 = 2;
            this.KaxChart1.SeriesSet[0].Points.Add(point4);

If we want to let chart be more vivid, we can try to add frame to stock chart by using demo C# codes below.


KaxChart1.SeriesSet[0].StyleSet.Border.Color = System.Drawing.Color.Black;
KaxChart1.SeriesSet[0].StyleSet.Border.Width = 1;

How to Set Candle Chart Axis with C# Codes

We can respectively set the values of x axis and y axis to let chart display even very small differences among all the sets of data. To be specific, we can adjust scale and space of axis. For detailed guides, please see: C# codes to set chart axis element. Also, you can check here to see Candle chart online demo image.


KaxChart1.PlotArea.AxisX.MaxValue = 10;
KaxChart1.PlotArea.AxisX.MinValue = 1;

KaxChart1.PlotArea.AxisY.MaxValue = 10;
KaxChart1.PlotArea.AxisY.Step = 1;
KaxChart1.PlotArea.AxisY.AxisMode = ChartAxisYMode.Extended;

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