Hi Seder,
Greetings from Syncfusion.
We have analyzed your query to render multiple axis chart. Please find the following code snippet to render multiple axis and how to bind data for different axis. By default primaryXAxis and primaryYAxis will render. If you want to add axis, you can add like this.
<ejs-chart [primaryXAxis]='axis'>
<e-axes>
<e-axis
name='yAxis' [opposedPosition]='position'>
</e-axis>
<e-series-collection>
<e-series [dataSource]='data'
type='Column'
xName='x'
yName='y'
name='Germany'
width=2>
</e-series>
<e-series [dataSource]='data1'
type='Line'
xName='x'
yName='y'
name='Japan'
width=2
yAxisName='yAxis'>
</e-series>
</e-series-collection>
</e-axes>
</ejs-chart>
We have refreshed the data by using checkbox.
app.component.html
<input
type="checkbox" (change)='isIndexed($event)'
id="isIndexed"
> Change Germany Data
app.component.ts
public isIndexed(e:
Event):
void {
this.data
= [
{ x:
'Sun', y:
45 },
{ x: 'Mon', y:
80 },
{ x:
'Tue', y:
90 },
{ x: 'Wed', y:
100 },
{ x: 'Thu', y:
35 },
{ x: 'Fri', y:
75 },
{ x:
'Sat', y:
10 }
];
}
Please find the following stackblitz sample for reference: sample
Regards,
Kesavan
