react-native-charts-wrapper yOffset in yAxis not working - react-native

Question

I'm trying to use this option, but it has no effect, and when I take a look at react-native-charts-wrapper code, I think maybe it is not correct.
In file ChartBaseManager.java, the setCommonAxisConfig function is only called for xAxis, but never called for yAxis. I'm a newbie at react native and java, so I don't understand all the code.
Maybe is this the reason for not working yOffset in y axis or I'm doing something wrong?
I'm using Line chart and my configuration is:
this.state = {
data: {
dataSets: [
{
values: [getDefaultPoint()],
label: "Teste",
config: {
drawCircleHole: false,
drawCircles: false,
drawValues: false,
lineWidth: 2,
barSpace: 0.2,
shadowWidth: 0.5,
shadowColor: processColor("white"),
shadowColorSameAsCandle: true,
neutralColor: processColor("white"),
decreasingColor: processColor("red"),
decreasingPaintStyle: "fill",
increasingColor: processColor("green"),
increasingPaintStyle: "fill",
color: processColor("#50E3C2"),
drawFilled: true,
fillGradient: {
colors: [processColor("#3F4969"), processColor("#313347")],
positions: [0, 0.5],
angle: 90,
orientation: "LEFT_RIGHT"
},
fillAlpha: 200
}
}
]
},
legend: { enabled: false },
marker: {
digits: this.props.markerDigits,
enabled: true,
backgroundTint: processColor("blue"),
markerColor: processColor("#F0C0FF8C"),
textColor: processColor("white"),
textSize: Math.round(14 * EStyleSheet.value("$scale"))
},
xAxis: {
drawGridLines: false,
drawAxisLine: true,
drawLabels: true,
position: "BOTTOM",
textColor: processColor("white"),
valueFormatter: "date",
valueFormatterPattern: "HH:mm",
avoidFirstLastClipping: true,
textSize: 12 * EStyleSheet.value("$scale"),
axisLineColor: processColor("#50E3C2"),
gridColor: processColor(EStyleSheet.value("$chartGridLineColor")),
granularity: 1,
granularityEnabled: true,
yOffset: 5
},
yAxis: {
right: {
enabled: false
},
left: {
enabled: true,
valueFormatter: this.props.yValueFormatterPattern,
textColor: processColor("white"),
drawGridLines: true,
gridLineWidth: 1,
drawAxisLine: false,
drawLabels: true,
labelCount: 4,
labelCountForce: true,
yOffset: -5,
position: "INSIDE_CHART",
textSize: 10
}
},
chart: {
drawGridBackground: false,
autoScaleMinMaxEnabled: true,
touchEnabled: this.props.touchEnabled,
dragEnabled: true,
scaleEnabled: true,
scaleXEnabled: true,
scaleYEnabled: true,
pinchZoom: true,
doubleTapToZoomEnabled: true,
dragDecelerationEnabled: true,
dragDecelerationFrictionCoef: 0.99,
keepPositionOnRotation: false,
viewPortOffsets: {
left: this.props.viewPortLeftOffset,
top: this.props.viewPortTopOffset,
right: this.props.viewPortRightOffset,
bottom: this.props.viewPortBottomOffset
}
}
};
...
<LineChart
style={styles.chart}
data={this.state.data}
chartDescription={{ text: "" }}
legend={this.state.legend}
marker={this.state.marker}
xAxis={this.state.xAxis}
yAxis={this.state.yAxis}
{...this.state.chart}
/>
But if I place "yOffset: -5" in xAxis configuration, the offset is applied to labels.
Anyone has the same problem using this option in yAxis?

Answer 1

I tried moving configs out of state but get the same result, so I created a new app and used the code of LineChartGradientScreen.js of react-native-charts-wrapper examples and configured yAxis with options below.
No matter what value I put in yOffset, the labels always stay in same place
I want to put the labels above grid lines.
My example app code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
processColor,
} from 'react-native';
import {LineChart} from 'react-native-charts-wrapper';
const greenBlue = 'rgb(26, 182, 151)';
const petrel = 'rgb(59, 145, 153)';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={styles.body}>
<LineChart
style={styles.chart}
data={{
dataSets: [
{
values: [
{
y: 65,
x: 0,
marker: '65 kg',
},
{
y: 77,
x: 1,
marker: '77 kg',
},
{
y: 76,
x: 2,
marker: '76 kg',
},
{
y: 74,
x: 3,
marker: '74 kg',
},
{
y: 76,
x: 4,
marker: '76 kg',
},
{
y: 65,
x: 5,
marker: 'Today: 65 kg',
},
],
label: '',
config: {
mode: 'CUBIC_BEZIER',
drawValues: false,
lineWidth: 2,
drawCircles: true,
circleColor: processColor(petrel),
drawCircleHole: false,
circleRadius: 5,
highlightColor: processColor('transparent'),
color: processColor(petrel),
drawFilled: true,
fillGradient: {
colors: [processColor(petrel), processColor(greenBlue)],
positions: [0, 0.5],
angle: 90,
orientation: 'TOP_BOTTOM',
},
fillAlpha: 1000,
valueTextSize: 15,
},
},
{
values: [
{
y: 35,
x: 0,
marker: '35 kg',
},
{
y: 47,
x: 1,
marker: '47 kg',
},
{
y: 46,
x: 2,
marker: '46 kg',
},
{
y: 44,
x: 3,
marker: '44 kg',
},
{
y: 46,
x: 4,
marker: '46 kg',
},
{
y: 35,
x: 5,
marker: 'Today: 35 kg',
},
],
label: '',
config: {
mode: 'CUBIC_BEZIER',
drawValues: false,
lineWidth: 2,
drawCircles: true,
circleColor: processColor(petrel),
drawCircleHole: false,
circleRadius: 5,
highlightColor: processColor('transparent'),
color: processColor(petrel),
drawFilled: true,
fillGradient: {
colors: [processColor('red'), processColor('yellow')],
positions: [0, 0.5],
angle: 90,
orientation: 'TOP_BOTTOM',
},
fillAlpha: 1000,
valueTextSize: 15,
},
},
],
}}
chartDescription={{text: ''}}
legend={{
enabled: false,
}}
marker={{
enabled: true,
markerColor: processColor('white'),
textColor: processColor('black'),
}}
xAxis={{
enabled: true,
granularity: 1,
drawLabels: true,
position: 'BOTTOM',
drawAxisLine: true,
drawGridLines: false,
fontFamily: 'HelveticaNeue-Medium',
fontWeight: 'bold',
textSize: 12,
textColor: processColor('gray'),
valueFormatter: ['M', 'T', 'W', 'T', 'F', 'S'],
}}
yAxis={{
left: {
enabled: true,
textColor: processColor('white'),
drawGridLines: true,
gridLineWidth: 1,
drawAxisLine: false,
drawLabels: true,
yOffset: -5,
position: 'INSIDE_CHART',
textSize: 10,
gridColor: processColor('white'),
},
right: {
enabled: false,
},
}}
autoScaleMinMaxEnabled={true}
animation={{
durationX: 0,
durationY: 1500,
easingY: 'EaseInOutQuart',
}}
drawGridBackground={false}
drawBorders={false}
touchEnabled={true}
dragEnabled={false}
scaleEnabled={false}
scaleXEnabled={false}
scaleYEnabled={false}
pinchZoom={false}
doubleTapToZoomEnabled={false}
dragDecelerationEnabled={true}
dragDecelerationFrictionCoef={0.99}
keepPositionOnRotation={false}
/>
</View>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: 'black',
},
body: {
backgroundColor: 'black',
},
chart: {
height: 250,
},
});
export default App;