Plot Candle And Volume on same chart

[Amitabha]

Hi,

I am trying to plot Candlestick chart on top and Volume Chart at bottom on the same chart control (declared as sfchart_Price  in code below) in winform using c#. I tried as below -

1. Declared the two series (One for candlestick and other for volume). Also declared a Secondary Y Axis against which the volume should be plotted and a ChartLayout as suggested in https://help.syncfusion.com/windowsforms/chart/chart-axes#multiple-axes
   

        public ChartSeries Candle_Series = new ChartSeries("CandleStick", ChartSeriesType.Candle);

        public ChartSeries Volume_Series = new ChartSeries("Volume", ChartSeriesType.Column);

        public ChartAxis Secondary_Y_Axis = new ChartAxis(ChartOrientation.Vertical);

        public ChartAxisLayout PriceVol_Chart_Layout = new ChartAxisLayout();

2. Populated the above two series with relevant data

3. Then performed as below -

sfchart_Price.Series.Clear();

            sfchart_Price.Series.Add(Candle_Series);

            sfchart_Price.Series.Add(Volume_Series);

            sfchart_Price.Axes.Clear();

            sfchart_Price.Axes.Add(Secondary_Y_Axis);

            PriceVol_Chart_Layout.Axes.Clear();

            PriceVol_Chart_Layout.Axes.Add(sfchart_Price.PrimaryYAxis);

            PriceVol_Chart_Layout.Axes.Add(Secondary_Y_Axis);

            sfchart_Price.ChartArea.YLayouts.Clear();

            sfchart_Price.ChartArea.YLayouts.Add(PriceVol_Chart_Layout);

            sfchart_Price.Series[1].XAxis = Secondary_Y_Axis;

            sfchart_Price.ChartArea.YAxesLayoutMode = ChartAxesLayoutMode.SideBySide;

However, this is not producing the chart required. Please suggest how can I achieve the desired functionality using Syncfusion winform chart in c#.

Thanks,

Amit

[Yuvaraj Palanisamy]

Hi Amitabha, 

 

Greetings from Syncfusion. 

 

We would like to let you know that to add Candle series with Column series with the help of ColumnDrawMode property of Chart control in Windows Forms. Please find the code example below. 

CodeSnippet: 

chartSeries1 = new ChartSeries("Sales"); 

chartSeries1.Type = ChartSeriesType.Candle; 

chartSeries1.Style.DisplayText = false; 

 

chartSeries1.Points.Add("1999", 15, 5, 10, 7); 

chartSeries1.Points.Add("2000", 12, 7, 9, 11); 

chartSeries1.Points.Add("2001", 18, 9, 16, 12); 

chartSeries1.Points.Add("2002", 22, 11, 14, 19); 

chartSeries1.Points.Add("2003", 15, 5, 10, 7); 

chartSeries1.Points.Add("2004", 12, 7, 9, 11); 

chartSeries1.Points.Add("2005", 18, 9, 16, 12); 

chartSeries1.Points.Add("2006", 22, 11, 14, 19); 

chartSeries1.Points.Add("2007", 18, 9, 16, 12); 

 

ChartSeries chartSeries2 = new ChartSeries("Volume"); 

chartSeries2.Type = ChartSeriesType.Column; 

chartSeries2.Style.Interior = new BrushInfo(Color.LightBlue); 

chartSeries2.Points.Add("1999", 2); 

chartSeries2.Points.Add("2000", 5); 

chartSeries2.Points.Add("2001", 6); 

chartSeries2.Points.Add("2002", 7); 

chartSeries2.Points.Add("2003", 2); 

chartSeries2.Points.Add("2004", 5); 

chartSeries2.Points.Add("2005", 6); 

chartSeries2.Points.Add("2006", 7);  

chartSeries2.Points.Add("2007", 4); 

 

this.chartControl1.ColumnDrawMode = ChartColumnDrawMode.ClusteredMode; 

 

for (int i = 0; i < chartSeries1.Points.Count; i++) 

{ 

    var point = chartSeries1.Points[i]; 

    if (point.YValues[3] < point.YValues[2]) 

    { 

        chartSeries1.Styles[i].Symbol.Shape = ChartSymbolShape.Triangle; 

        chartSeries1.Styles[i].Symbol.Color = Color.Green; 

    } 

    else 

    { 

        chartSeries1.Styles[i].Symbol.Shape = ChartSymbolShape.InvertedTriangle; 

        chartSeries1.Styles[i].Symbol.Color = Color.Red; 

    } 

    chartSeries1.Styles[i].Symbol.Offset = new Size(0, -10); 

} 

 

this.chartControl1.Series.Add(chartSeries1); 

this.chartControl1.Series.Add(chartSeries2); 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167425/ze/Candle_Column-1445029929  

  

Output: 

 

 

For more details, please refer the below link. 

https://help.syncfusion.com/windowsforms/chart/chart-series#columndrawmode  

 

Regards, 

Yuvaraj. 

[Amitabha]

Hi Yuvaraj ,

Thank you for your response. I tried as you suggested. However when fed with real data (very high volume) the Candle Series is getting squeezed and becoming invisible(almost). I want the volume series to occupy only the lower 20% of Chart Area whereas the Candle Series will occupy the top 80% of Chart area (to ensure that volume series data does not get projected within Candle series data). Please suggest how can I achieve this.

Thanks,

Amit

[Yuvaraj Palanisamy]

Hi Amitabha, 

 

We can achieve your this “80% of Candle and 20% of Volume” with the help of Multiple axis and ChartAxisLayout. Please find the code example below. 

 

CodeSnippet: 

ChartAxis verticalAxis = new ChartAxis(); 

verticalAxis.SetRange(new MinMaxInfo(0, 8, 4)); 

verticalAxis.RangeType = ChartAxisRangeType.Set; 

verticalAxis.GridLineType.ForeColor = Color.LightGray; 

verticalAxis.Orientation = ChartOrientation.Vertical; 

this.chartControl1.Axes.Add(verticalAxis); 

 

ChartAxisLayout layout1 = new ChartAxisLayout(); 

layout1.Axes.Add(this.chartControl1.PrimaryYAxis);   

layout1.Height = System.Web.UI.WebControls.Unit.Percentage(80); 

 

ChartAxisLayout layout2 = new ChartAxisLayout(); 

layout2.Axes.Add(verticalAxis); 

 

layout2.Height = System.Web.UI.WebControls.Unit.Percentage(20); 

this.chartControl1.ChartArea.YLayouts.Add(layout1); 

this.chartControl1.ChartArea.YLayouts.Add(layout2); 

 

chartSeries2.YAxis = verticalAxis; 

 

Also, we have attached sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Candle_Column1854780094  

 

Output: 

 

For more details, please refer the below link. 

https://help.syncfusion.com/windowsforms/chart/chart-axes#multiple-axes  

 

Regards, 

Yuvaraj. 

[Amitabha]

Hi Yuvaraj ,

Thank You so much. It really helped me sorting out the issue

Thanks,

Amitabha

[Yuvaraj Palanisamy]

Hi Amitabha,

Thank you for your update.

Please let us know if you have any further assistance on this. 

  

Regards, 

Yuvaraj 

[Amitabha]

Hi Yuvaraj,

I have another issue when I plotted the Price and volume on the same chart. I changed the charts 'BackInterior' and 'ChartInterior' to a blackish color and kept the crosshair's color as white. However, this has caused the crosshair lines turn Black as well and I am not able to change the crosshair line's color to white anymore keeping the charts BackInterior and ChartInterior intact with the blackish color. Please suggest how can I make the crosshair lines white.

Thanks,

Amit

[Yuvaraj Palanisamy]

Hi Amitabha,

You can achieve your requirement “Crosshair color as white and Chart interior is black” with the help of Crosshair Line color property as per the below code example. 

CodeSnippet: 

this.chartControl1.ChartInterior = new BrushInfo(Color.Black); 

this.chartControl1.Crosshair.Visible = true; 

this.chartControl1.Crosshair.Line.Color = Color.White; 

this.chartControl1.Crosshair.Line.Width = 4; 

Also, we have attached the sample for your reference. Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/167425/ze/WindowsFormsApplication1482952542  

  

Output: 

 

For more details, please refer the below link. 

https://help.syncfusion.com/windowsforms/chart/runtime-features#crosshair  

Regards, 

Yuvaraj.