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

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;