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.
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),
},
})),
]
: [],
};
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