StockChart with multiple series of different type

[Marco Giorgi]

I would like to know if it's possible to have more than a series, of different types, in the stockchart.

In particular, I'd like to have a chart like this one

https://ej2.syncfusion.com/javascript/demos/#/material/stock-chart/multi-pane.html

where in the first pane, I have both a series of type 'Candle' and another series of type 'RangeArea'

With the 'RangeArea' that is drawn behind the candle series to not hide it.

Something like:

series: [ { dataSource: window.chartData, type: 'Candle', yAxisName: 'yAxis1' },

{

type: 'RangeArea', marker: { visible : false }, name: 'India', dataSource: series1, xName: 'x', high: 'high', low: 'low', opacity: 0.4, border: { width: 2 } }]

[Baby Palanidurai]

Hi Marco, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. Yes, it is possible to add more than one series in the stock chart like your attached code snippet. Also, We can achieve your other requirement using the opacity property in series. If you reduce the opacity of the RangeAreaSeries, then we can show candle series without a hide. We have created a simple sample for your reference. Please find below sample and revert us if you need further assistance. 

 

Code Snippet: 

series: [ 

                { 

                    dataSource: window.chartData,  

                    type: 'RangeArea', yAxisName: 'yAxis1', high: 'open', low: 'close', opacity: 0.4, 

                }, 

                 { 

                    dataSource: window.chartData,  

                    type: 'Candle', yAxisName: 'yAxis1' 

                }, 

  //other configurations here 

           ], 

 

Screenshot: 

 

 

Sample: https://stackblitz.com/edit/ebk7em-rmkzqi?file=index.js 

 

UG: https://ej2.syncfusion.com/javascript/documentation/stock-chart/appearance/?no-cache=1 

 

Hope this helps. 

 

Regards, 

Baby.