This section provides step-by-step instructions for building a Candle Chart. The graph shows the information as a candle chart with four Y variables on the y-axis that represent the hi, low, open, and close values of the stock and the x-axis values provide the position for each candle.
The following chart illustration is shown before you begin creating the chart:
Both steps are shown below for creating the Candle chart at design time or programmatically through the Chart objects.
To create a candle chart at design
time
This topic walks you through the steps for creating a candle chart using the Chart Properties designer. In this topic you will learn how to set the specific chart type, modify the data series, add data to the chart, and format the appearance of the candle all at design-time in a few simple steps.
This task assumes you have already added the C1Chart control to the form.
Set the Chart Type
The first step in configuring a chart through the smart tag Chart Properties is to select a gallery type from the wealth of chart types available. From basic chart types like Bar and Lines to more complex charts like Polar and Surface, C1Chart allows you to deal with any data visualization needed.
1. Right-click on the C1Chart control and click Chart Properties from its short-cut menu.
2. Select Gallery from the treeview pane, then select Stock from the Simple Types list.
3. In the pane, select the Candle chart and click Apply.
Modify the Data Series
4. Select Data from the treeview pane.
5. Click Remove to remove Series0, Series 1, Series 2, and Series 3.
6. Click Add to add a new series for the Y-values that will display the values for each stock.
A warning will appear to remind you that you must add data to the new series.
Add Data to the Data Series
7. Select Data->DataTable from the treeview pane. Add the following data to the data table:
8. Add data values as in the following table.
Note: X represents the position on the x-axis, Y represents the Hi value, Y1 represents the low value, Y2 represents the open value, and Y3 represents the closing value.
9. Click Apply to update the chart.
A preview image of the updated chart appears in the lower left pane of the Chart Properties designer.
Format Candle
Next we will change the default line color to red, increase the body width of the candle, and increase the line thickness. We will use the LineStyle property to change the color of the lines to red, the SymbolStyle property to change the body width of the candle, and LineStyle property to change the thickness of the lines.
10. Select Data from the treeveiw pane, and then select the ChartData tab.
11. Click on the dropdown arrow next to Line.
.
12. Click on the dropdown arrow next to Color and select Red.
13. Click on the drowdown arrow next to Width and select the second line.
14. Click OK to save and close the Chart Properties dialog box.
15. Open the C1Chart properties window and click on the ellipsis button next to SeriesList.
The ChartDataSeries Collection Editor appears.
16. Expand the SymbolSize and set the SymbolStyle.Size property to 10.
The body of the candle increase from its default size, 5, to 10.
To create a candle chart
programmatically
A Candle chart can be created programmatically using the following steps:
1. Add the following directive to declare the C1.Win.C1Chart namespace:
Imports C1.Win.C1Chart;
•C#
using C1.Win.C1Chart;
2. Double click Form1 and add the following code in the Form1_Load procedure to create the simple Candle chart:
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
c1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
'Declare the x and y variables as double to represent the x, y, y1, y2, and y3 values and assign the values
Dim x As Double() = New Double() {1, 2, 3, 4, 5}
Dim y_hi As Double() = New Double() {8, 12, 10, 12, 15}
Dim y_low As Double() = New Double() {20, 22, 19, 24, 25}
Dim y_open As Double() = New Double() {10, 16, 17, 15, 23}
Dim y_close As Double() = New Double() {16, 19, 15, 22, 18}
'copy the x, y, y1, y2, and y3 data into the chart group
c1Chart1.ChartGroups(0).ChartData(0).X.CopyDataIn(x)
c1Chart1.ChartGroups(0).ChartData(0).Y.CopyDataIn(y_hi)
c1Chart1.ChartGroups(0).ChartData(0).Y1.CopyDataIn(y_low)
c1Chart1.ChartGroups(0).ChartData(0).Y2.CopyDataIn(y_open)
c1Chart1.ChartGroups(0).ChartData(0).Y3.CopyDataIn(y_close)
'assign the candle chart to the chart type
c1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Candle
'Make the rising candles transparent to show rising prices
c1Chart1.ChartGroups(0).HiLoData.FillTransparent = True
'Declare the color for the lines
c1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Color = System.Drawing.Color.Red
'Increase the line thickness
c1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Thickness = 2
'Increase the body width of the candle
c1Chart1.ChartGroups(0).ChartData.SeriesList(0).SymbolStyle.Size = 10
End Sub
•C#
private void Form1_Load(object sender, EventArgs e)
{
c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
//Declare the x and y variables as double to represent the x, y, y1, y2, and y3 values and assign the values
double[] x = new double[] { 1, 2, 3, 4, 5 };
double[] y_hi = new double[] { 8, 12, 10, 12, 15 };
double[] y_low = new double[] { 20, 22, 19, 24, 25 };
double[] y_open = new double[] { 10, 16, 17, 15, 23 };
double[] y_close = new double[] { 16, 19, 15, 22, 18 };
//copy the x, y, y1, y2, and y3 data into the chart group
c1Chart1.ChartGroups[0].ChartData[0].X.CopyDataIn(x);
c1Chart1.ChartGroups[0].ChartData[0].Y.CopyDataIn(y_hi);
c1Chart1.ChartGroups[0].ChartData[0].Y1.CopyDataIn(y_low);
c1Chart1.ChartGroups[0].ChartData[0].Y2.CopyDataIn(y_open);
c1Chart1.ChartGroups[0].ChartData[0].Y3.CopyDataIn(y_close);
//assign the candle chart to the chart type
c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Candle;
//Make the rising candles transparent to show rising prices
c1Chart1.ChartGroups[0].HiLoData.FillTransparent = true;
//Declare the color for the lines
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Color = System.Drawing.Color.Red;
//Increase the line thickness
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Thickness = 2;
c1Chart1.ChartGroups[0].ChartData.SeriesList[0].SymbolStyle.Size = 10;
}