Seperate Y axis for combined Line chart and Stock chart

I am trying to combine a line chart with a stock chart, and have them on seperate Y Axis, but on page load keep getting the error:

core.js:6157 ERROR TypeError: Cannot read property 'minimum' of undefined at Series.findVisibility (ej2-charts.es2015.js:6014) at Series.setEmptyPoint (ej2-charts.es2015.js:5968) at Series.processJsonData (ej2-charts.es2015.js:5906) at Series.dataManagerSuccess (ej2-charts.es2015.js:6171) at Series.refreshDataManager (ej2-charts.es2015.js:6148) at Chart.initializeDataModule (ej2-charts.es2015.js:8963) at Chart.processData (ej2-charts.es2015.js:8935) at Chart.cartesianChartRendering (ej2-charts.es2015.js:8562) at Chart.render (ej2-charts.es2015.js:8549) at Chart.appendTo (ej2-base.es2015.js:6935)

It renders fine when I don't include yAxisName on the series..
using Angular 11
---------------------------------------------------------------------------------------------------

html template
<ejs-stockchart id="chart-container"  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [crosshair]='crosshair' >
    <e-axes>
            <e-axis rowIndex="1" 
            name='secondaryAxis'             
            [opposedPosition]="true" 
            title="title" 
            [majorGridLines]="{ width : 1 }" 
            labelFormat="{value}°C"                                                  
            [minimum]="300000" 
            [maximum]="20000000" 
            > 
        </e-axis> 
    </e-axes>
    <e-stockchart-series-collection>
        <e-stockchart-series [dataSource]='stockData' type='Candle' xName='date' High='high' Low='low' Open='open' Close ='close' Name='Apple'></e-stockchart-series>
        <e-stockchart-series [dataSource]='data2' type='line' xName='date' yName="amount" width="4" yAxisName="secondaryAxis"  [marker]='marker' name="os" ></e-stockchart-series>
        <!-- <e-stockchart-series [dataSource]='stockData' yAxisName='secondary' width='2' type='ColumnSeries' xName='x' yName='volume'> </e-stockchart-series> -->
    </e-stockchart-series-collection>
</ejs-stockchart>


------------------------------------------------------------------------------------------
app.module.ts imports

import { ChartAllModuleStockChartModuleStockChartAllModuleDateTimeServiceLegendService
  TooltipServiceCategoryServiceLineSeriesServiceColumnSeriesService,
  DataLabelServiceCandleSeriesServiceSplineSeriesServiceRangeTooltipServiceStepLineSeriesService
  ParetoSeriesServiceSplineAreaSeriesServiceMultiColoredLineSeriesServicefrom '@syncfusion/ej2-angular-charts';

@NgModule({
     declarations: [SyncfusionChartComponent]
     imports: [StockChartModule,ChartAllModuleStockChartAllModule ],
     providers: DateTimeServiceLegendServiceTooltipServiceDataLabelService
     CandleSeriesServiceColumnSeriesServiceCategoryServiceLineSeriesService,
     SplineSeriesServiceRangeTooltipServiceStepLineSeriesServiceParetoSeriesService,
     SplineAreaSeriesServiceMultiColoredLineSeriesService],
})



---------------------------------------------------------------
chart component

....
ngOnInit(): void {
this.stockData =  [
{
    date: new Date'2012-04-02' ),
    open : 85.9757,
    high : 90.6657,
    low : 85.7685,
    close : 90.5257,
    volume : 660187068
  },
  {
    date: new Date'2012-04-09' ),
    open : 89.4471,
    high : 92,
    low : 86.2157,
    close : 86.4614,
    volume : 912634864
  },
...
]
this.data2 = [{date: new Date(201231), amount: 3000000 },{date: new Date(201531), amount: 10000000 }, {date: new Date(201831), amount: 16000000}]
this.crosshair = { enable: true };
this.primaryYAxis = {
        // plotOffset: 25,
         rowIndex: 1
         opposedPosition: false,
         rangePadding: 'None',
     };
this.primaryXAxis = { valueType: 'DateTime' };
this.marker = { visible: truewidth: 10height: 10 };
}

-------------------------------------------
package.json
"@syncfusion/ej2-angular-charts""^18.4.47",
}

-------------------------------------------


Any help finding a solution would be very helpful, or maybe this is a bug? Thanks in advance!

1 Reply 1 reply marked as answer

DG Durga Gopalakrishnan Syncfusion Team March 12, 2021 12:59 PM UTC

Hi M H,

Greetings from Syncfusion.

We have validated your reported scenario with attached code snippet. We already have an online demo for multiple axis. Please check with the below sample link.




Please let us know if you have any concerns.

Regards,
Durga G


Marked as answer
Loader.
Up arrow icon