How to specify the data to render on y or y1 axis, based on the yAxisID in the data being provided to the line chart

[Shivangigupta01]

Expected Behavior

Labels rendering on y and y1 axis labels in the line chart are similar and not as per the data provided. the values that are being rendered on y axis are similar to the values being rendered on y1 axis.

how can I provide the yAxisID to the line chart getting rendered.

Actual Behavior

the data being rendered on y and y1 axis should be based on the data being provided to the line chart.

Screenshots

attached below the screenshot of how the data is being rendered on web(using charts: https://www.npmjs.com/package/chart.js?activeTab=readme) and how rendered in mobile, provided the same data.

Data and config

this is how I am mapping my api response to a suitable data configuration.
const chartData = {
dataSets:
data && data?.dataSets?.length > 0
? [
...data.dataSets.map((item: IGraphDataSet) => ({
values: item.data,
label: '',
config: {
...dataConfig,
mode: data,
color: processColor(item.color),
circleColor: processColor(item.color),
},
})),
]
: [],
};

where datasets array looks like:
[
{
    "color": "#6AABAC",
    "data": [
      0,
      0,
      0,
      0,
      0,
      338.407,
      338.407,
      338.407,
      338.407,
      338.407,
      338.407,
      338.407
    ],
    "label": "sample label 1",
    "yAxisID": "y1"
  },
  {
    "color": "#AF8E62",
    "data": [
      0,
      0,
      0,
      0,
      0,
      0,
      3,
      3,
      3,
      3,
      3,
      3
    ],
    "label": "sample label 2",
    "yAxisID": "y"
  },
]

I need to specify the data to render on y or y1 axis, based on the yAxisID.

this is how I have configured my Line chart component

<LineChart
ref={chartRef}
style={styles.chart}
legend={{enabled: true, form: 'NONE'}}
data={chartData}
chartDescription={{text: ''}}
marker={markerConfig}
xAxis={{
...xAxisConfig,
position: 'BOTTOM',
valueFormatter: data?.labels,
}}
yAxis={yAxisConfig}
/>

I have the following configurations added for chart, x and y axis

export const markerConfig = {
enabled: true,
digits: 2,
markerColor: processColor('grey'),
textColor: processColor(colors.white),
textAlign: 'center',
flexWrap: 'wrap',
};

export const dataConfig = {
lineWidth: 2,
drawFilled: false,
fillAlpha: 35,
drawValues: false,
circleRadius: 2,
drawCircleHole: false,
};

export const xAxisConfig = {
granularityEnabled: true,
granularity: 1,
textSize: 13,
drawGridLines: true,
gridLineWidth: 1,
gridColor: processColor(colors.border),
axisLineColor: processColor(colors.border),
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
labelRotationAngle: -90,
avoidFirstLastClipping: false,
};

export const yAxisConfig = {
left: {
granularityEnabled: true,
granularity: 0.1,
textSize: 13,
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
drawGridLines: true,
gridColor: processColor(colors.border),
drawAxisLines: false,
},
right: {
granularityEnabled: true,
granularity: 0.1,
textSize: 13,
textColor: processColor(colors.black),
fontFamily: fonts.regular,
drawLabels: true,
drawGridLines: true,
gridColor: processColor(colors.border),
drawAxisLines: false,
},
};

Additional Notes

the only difference between the data configuration of web and mobile is that of the yAxisId.
Example of how data is configured in web:

const getDataSet = (dataSets) => {
return dataSets.map((item) => {
return {
label: item.label,
data: item.data,
borderColor: item.color,
backgroundColor: item.color,
pointRadius: 3,
yAxisID: item.yAxisID, //how can we configure this same property in Line Chart
};
});
};

Specifications

Version: react-native-charts-wrapper : 0.5.5
Platform: iOS