Bar chart issues with legend & data label between iOS and Android

[tiggem1993]

Hi, I have implemented the bar chart, but seen three issues when comparing the UI between iOS and Android:

• ISSUE 1 : I can't see the gap between x-axis label and legend label in Android.
• ISSUE 2 : In iOS data label above the bar is partly visible.
• ISSUE 3 : Data label above the bar chart is not similar in iOS and Android. In Android 84.1k but in iOS 84.19k.

Note: See attached screenshot of both iOS and Android chart.

Screenshot

Query,

So please let me know, how to fix these issues or what key parameters are required to handle these issues.

Specifications / Dependencies Installed

Currently Project is running with following React framework versions:

• "react": "16.13.1",
• "react-native": "0.63.4",
• "react-native-charts-wrapper": "^0.5.7",

Tested on

• Android 11 emulator - Pixel 3a,
• iOS 14.1 simulator - iPhone 11 pro

Data and config

const chartDataObj={                    
	dataSets:[
		{
			label: "Publication Year", 
			values: [{y:77604},{y:84190},{y:97098},{y:115531},{y:38452}],                
			config: {                    
				color: processColor('#D63D55'),
				valueFormatter:'largeValue', 
				valueTextSize: 10,    				
			},
		}
	],
	config: {
		barWidth: 0.7
	},
}

const xAxisObj={
	valueFormatter: [2017,2018,2019,2020,2021],
	labelRotationAngle: -45,
	drawGridLines: false,
	position: 'BOTTOM',
	labelCount: 10,
}

const yAxisObj = {
	left: {
		drawGridLines: true,
		gridColor: processColor('#000000'),
		textColor: processColor(`#00000077`),
		fontFamily: 'Roboto',
		textSize: 14,
		axisLineWidth: 0,
		labelCount: 5,
		drawAxisLines: true,
		axisLineColor: processColor('#FFFFFF00'),
		axisMinimum: 0, //0 
		axisMaximum: 116000,
		valueFormatter:'largeValue'
	},
	right: {
		enabled: false,
	},
}

const legendObj = {
	enabled: true,
	textSize: 12,
	form: 'CIRCLE',
	formSize: 14, 	
	formToTextSpace: 5,
	wordWrapEnabled: true,
	maxSizePercent: 0.5
}
<BarChart
	onSelect={yearSelected}
	style={{        
		width:window.width-72,
		height:250,
		marginLeft:24
	}}                
	data={chartDataObj}
	xAxis={xAxisObj}
	yAxis={yAxisObj}
	legend={legendObj}	
	chartDescription={{ text: '' }}                    	
	dragEnabled={false}
	drawGridBackground={false}
	drawBorders={false}
	scaleEnabled={false}
	scaleXEnabled={false}
	scaleYEnabled={false}
	pinchZoom={false}
	doubleTapToZoomEnabled={false}
/>

[tiggem1993]

@wuxudong Can you please help me?

[tiggem1993]

@wuxudong I have fixed ISSUE 1 & 2. I just specify extraOffsets in BarChart to fix the gap between x-axis label and legend label in Android and now see the full label above the Bars in iOS. Now only 3rd ISSUE is pending for fix. FIX

<BarChart
    ...
    extraOffsets={{"bottom":Platform.OS==='ios'?0:15,"top":Platform.OS==='ios'?25:5}} 
/> 

[aysenurtaskomur]

@tiggem1993 you should add this

marker={{
   digits:2
}}

[tushar-xotiv]

@tiggem1993 have you fixed issue number 3 ?