Link series to different Y-axis

[Johnny]

I new to using syncfusion components.

I create the following chart with 4 series. 3 series with absolute values and one with %. I like the last one to use it's own y-axis.

                    <ejs-chart id="byagechart" width="100%" palettes="palettes">

                        <e-chart-primaryxaxis valueType="Category" labelFormat="y" edgeLabelPlacement="Shift"></e-chart-primaryxaxis>

                        <e-series-collection>

                            <e-series dataSource="ViewBag.ByAges" xName="PatientAge" width="2" opacity="1" yName="NoShowAmount" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>

                            <e-series dataSource="ViewBag.ByAges" xName="PatientAge" width="2" opacity="1" yName="ShowAmount" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" visible="@ViewBag.ShowIsVisible"></e-series>

                            <e-series dataSource="ViewBag.ByAges" xName="PatientAge" width="2" opacity="1" yName="TotAmount" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" visible="@ViewBag.ShowIsVisible"></e-series>

                            <e-series dataSource="ViewBag.ByAges" xName="PatientAge" width="2" opacity="1" yName="NoShowPcnt" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" ></e-series>

                        </e-series-collection>

                    </ejs-chart>

[Johnny]

Found the solution. For reference to those who have the same question :

add an e-chart-axes tag

for each y-axis you want add an e-chart-axis tag, set the name attribute

use that name attribute as the value for the yAxisName attribute of your data-serie

          

                    <ejs-chart id="byagechart" width="100%" palettes=@palettes>

                        <e-chart-primaryxaxis valueType="Double" labelFormat="y" edgeLabelPlacement="Shift" interval="5" minimum="0" maximum="75"></e-chart-primaryxaxis>

                    <e-chart-axes>

                        <e-chart-axis name="abs"  desiredIntervals="10" minimum="0" maximum="@( yMaxByAges )"></e-chart-axis>

                        <e-chart-axis name="pcnt" desiredIntervals="10" minimum="0" maximum="@maxPcnt" opposedPosition="true" labelFormat="P"></e-chart-axis>

                    </e-chart-axes>

                        <e-series-collection>

                            <e-series dataSource="ViewBag.ByAges" name="No-Show" xName="PatientAge" width="2" opacity="0.5" yName="NoShowAmount" yAxisName="abs" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>

                            <e-series dataSource="ViewBag.ByAges" name="No-Show [%]" xName="PatientAge" width="2" opacity="1" yName="NoShowPcnt" yAxisName="pcnt" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>

                        </e-series-collection>

                    </ejs-chart>

[Baby Palanidurai]

Hi Johnny, 

  

 

We are happy to hear from your last update. We have attached UG and demo links for further assistance on multiple axis.  Please refer below links, 

 

  

UG : https://ej2.syncfusion.com/aspnetcore/documentation/chart/axis-customization/#multiple-axis 

 

Demo:  https://ej2.syncfusion.com/aspnetcore/Chart/MultipleAxis#/material 

 

  

Kindly revert us, if you have any queries. 

 

  

Regards, 

Baby.