I wanted to shift y axis to right side in LineChart

Question

I wanted to show yAxis on right side in my LineChart. I used yAxisSide prop, it worked perfectly fine when implemented but it didn't worked when i run app next day. here is the code.

 <LineChart
            noOfSections={sections}
          
            width={getWidth(77)}
            
            yAxisSide={'right'} //Here is the issue
            
            height={getHeight(20)}
            yAxisOffset={ExpectedValue()}
            yAxisThickness={0}
            yAxisLabelSuffix="kg"
            xAxisLength={getWidth(65)}
            xAxisLabelTexts={ExpectedWeeks()}
            xAxisThickness={0}
            thickness={3.3}
            color="#50C878"
            curved
            
            hideRules={true}

            customDataPoint={customDataPoint}
            initialSpacing={getWidth(5)}
            spacing={getWidth(15)}
            stepValue={5}
      
            data={DataValues()}
          
          />

I tried shifting y axis to right side but my logic not working.I want to resolve this issue.

Answer 1

I recently encountered this problem, and here is my solution.

Import yAxisSides from gifted-charts-core, and use it like "yAxisSides.RIGHT" and make sure to specify the width of the chart.

1. set Y-axis to right

yAxisSide={yAxisSides.RIGHT}

2. Adjust the Y-axis position.

yAxisLabelContainerStyle={{
  marginRight:-15,
}}

3. Adjust the Y-axis text position

  yAxisTextStyle={{
    color: 'gray',
    marginLeft:10
  }}

example code belowe

import { LineChart} from 'react-native-gifted-charts'
import { yAxisSides } from 'gifted-charts-core';


<LineChart 
  areaChart={true}
  data={ptData}
  width={300}
  color={'#00ff83'}
  startFillColor="rgba(20,105,81,0.3)"
  endFillColor="rgba(20,85,81,0.01)"
  startOpacity={0.9}
  yAxisColor="#0BA5A4"
  yAxisThickness={2}
  yAxisTextStyle={{
    color: 'gray',
    marginLeft:10
  }}
  yAxisLabelContainerStyle={{
    marginRight:-15,
  }}
  yAxisSide={yAxisSides.RIGHT} 
/>