react-native-charts-wrapper
react-native-charts-wrapper copied to clipboard
LineChart no props for adjustment of spacing of y-axis and line chart data
Expected Behavior

Actual Behavior

Data and config
<LineChart
style={{ flex: 1, marginLeft: 30, width: '97%' }}
data={{
dataSets: [
{
values: this.state.data,
label: '',
config: {
mode: 'CUBIC_BEZIER',
drawValues: false,
lineWidth: 0,
drawCircles: true,
circleColor: processColor('#fff'),
drawCircleHole: false,
circleRadius: 10,
highlightColor: processColor('transparent'),
color: processColor(petrel),
drawFilled: true,
fillGradient: {
colors: [
processColor('#4CD5F8'),
processColor('#4CD5F8'),
],
positions: [0, 1],
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: 'SFProText-Medium',
fontWeight: 'bold',
textSize: 12,
textColor: processColor('gray'),
valueFormatter: dates,
}}
yAxis={{
left: {
drawGridLines: false,
textColor: processColor('gray'),
drawAxisLine: false,
},
right: {
enabled: false,
position: 'OUTSIDE_CHART',
maxWidth: 50,
minWidth: 20,
},
}}
autoScaleMinMaxEnabled={true}
animation={{
durationX: 0,
durationY: 1500,
easingY: 'EaseInOutQuart',
}}
drawGridBackground={true}
gridBackgroundColor={processColor('#C8EEF8')}
gridBackgroundRadius={300}
touchEnabled={false}
dragEnabled={false}
scaleEnabled={false}
scaleXEnabled={false}
scaleYEnabled={false}
pinchZoom={false}
doubleTapToZoomEnabled={false}
dragDecelerationEnabled={true}
dragDecelerationFrictionCoef={0.99}
keepPositionOnRotation={false}
/>
Specifications
- Version:
- react-native-charts-wrapper: "^0.5.1"
- react-native: "0.57.4",
According to https://github.com/PhilJay/MPAndroidChart/issues/3486
LabelCount
AxisMaximum
AxisMinimum
may help, or you can try adding following code to corresponding y axis.
granularityEnabled: true
granularity: [interval you want]
How I ended up solving the space issue is by doing this:
valueFormatter: '# ;-# ',
Which I don't really understand... The value itself is the #
while the extra space characters give the label space between the edge of the chart. The minus sign shows if the number is negative.