How to do make independent series in one ChartView without combined in WinForms?

[Johnny]

I develop candlestick charts now. How to use Telerik UI for WinForms put candlestick series on the top and volume series on the bottom? (like 2020-12-24_16-38-06.png)

[Nadya | Tech Support Engineer]

Hello, Johnny,

Considering the provided picture it looks like that the different series are plotted in two different charts with different axes. The possible solution that I can suggest in order to achieve the look from the picture is to add two identical charts stacked one after the other. Thus, you can display the desired series and show the required data.

I prepared a sample project to demonstrate this approach. The result is illustrated below:

public RadForm1()
{
    InitializeComponent();
    CandlestickSeries candlestickSeries = new CandlestickSeries();
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 11, 7, 8, DateTime.Now));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(8, 9, 5, 9, DateTime.Now.AddDays(1)));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 10, DateTime.Now.AddDays(2)));
    candlestickSeries.DataPoints.Add(new OhlcDataPoint(7, 10, 6, 9, DateTime.Now.AddDays(3)));
    this.radChartView1.Series.Add(candlestickSeries);
    this.radChartView1.View.Margin = new Padding(2);

    BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
    barSeries.Name = "Q1";
    barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
    barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall"));
    this.radChartView2.Series.Add(barSeries);
    this.radChartView2.View.Margin = new Padding(2);
}

I hope this information helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

[Johnny]

If using two charts, it difficult to align candlestick and volume point and difficult to share trackball and range selector. If using one chart, all issues on two charts are disappear.

[Johnny]

If it have more ways to arrange series in one chart, ChartView will be an awesome UI component in financial application.

[Nadya | Tech Support Engineer]

Hello, Johnny,

Thank you for the provided feedback about RadChartView.

You can arrange different series in one chart. This can be done by adding the desired series to the Series collection of the chart. For example, it is possible to add CandlestickSeries and BarSeries in the same chart.

Note, Trackball and RadRangeSelector can be defined per one RadChartView control only. For example, you can not have one range selector for several charts. I modified my sample project by adding the  CandlestickSeries and BarSeries in the same chart. However, the visual result should not be the same as the one shown picture that you provided. Below you can find my sample project that demonstrates how you can use RadChartView with multiple series and Trackball and RadRangeSelector enabled.

 public RadForm1()
 {
     InitializeComponent();
     DateTime dt = DateTime.Now;
     CandlestickSeries candlestickSeries = new CandlestickSeries();
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(10, 11, 7, 8, dt));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(18, 9, 5, 9, dt.AddDays(1)));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(12, 12, 9, 10, dt.AddDays(2)));
     candlestickSeries.DataPoints.Add(new OhlcDataPoint(13, 14, 6, 9, dt.AddDays(3)));
     this.radChartView1.Series.Add(candlestickSeries);

     CandlestickSeries candlestickSeries2 = new CandlestickSeries();
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(6, 7, 3, 4, dt));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(6, 2, 3, 4, dt.AddDays(1)));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(17, 18, 12, 13, dt.AddDays(2)));
     candlestickSeries2.DataPoints.Add(new OhlcDataPoint(7, 9, 5, 5, dt.AddDays(3)));
     this.radChartView1.Series.Add(candlestickSeries2);

     BarSeries barSeries = new BarSeries();
     barSeries.DataPoints.Add(new CategoricalDataPoint(1,dt));
     barSeries.DataPoints.Add(new CategoricalDataPoint(7,dt.AddDays(1)));
     barSeries.DataPoints.Add(new CategoricalDataPoint(5, dt.AddDays(2)));
     barSeries.DataPoints.Add(new CategoricalDataPoint(4, dt.AddDays(3)));
     this.radChartView1.Series.Add(barSeries);
     candlestickSeries.HorizontalAxis.LabelFitMode = AxisLabelFitMode.MultiLine;

     radChartView1.Controllers.Add(new ChartTrackballController());
     radChartView1.ShowTrackBall = true;
     this.radRangeSelector1.AssociatedControl = this.radChartView1;
 }

I hope this information is useful. If you have other questions please let me know.

Regards,
Nadya
Progress Telerik

[Johnny]

Thanks for your reply. But BarSeries values are unexpected. I think that is limitation on RadChartView for series arrangement.

 

[Nadya | Tech Support Engineer]

Hello, Johnny,

Currently, this is the behavior that RadChartView offers. If it is not suitable for your case feel free to use two separate RadChartViews with associated range selector and a track bar for each chart.

If other customers have similar requests, we will consider this functionality change in the future improvement of the control. Thank you for your understanding.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Nadya
Progress Telerik