We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

StockChart with multiple series of different type

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
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 } }]

1 Reply

BP Baby Palanidurai Syncfusion Team May 21, 2019 11:53 AM UTC

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 
Hope this helps. 

Live Chat Icon For mobile
Up arrow icon