react-native-svg-chart Yaxis points goig out of range

105 Views Asked by At

enter image description here

*Y-axis labels are reformatted value/60 *

Y-axis Max point is at 170 which is going out of graph. Graph height is not adjusting according to the highest point of the Y-axis value.Also plotted graph for values going upto 200 above which is plotted correctly in range.

<View
  style={{
    height: 250,
    paddingVertical: 10,
    flexDirection: 'row',
  }}>
  <YAxis
    data={props.data}
    yAccessor={({item}) => item?.sleep_n1_time}
    style={{marginBottom: xAxisHeight, width: 40, marginRight: 5}}
    contentInset={verticalContentInset}
    svg={axesSvg}
    formatLabel={(value, idx) => {
      if (props.data.length > 50) {
        return idx % 5 === 0 ? formatTime(value) : '';
      } else if (props.data.length > 20) {
        return idx % 2 === 0 ? formatTime(value) : '';
      } else {
        return formatTime(value);
      }
    }}
  />
  <View style={{flex: 1, marginRight: 10}}>
    <StackedAreaChart
      style={{height: 200, paddingVertical: 16}}
      data={props.data}
      keys={keys}
      contentInset={{...horizontalContentInset, ...verticalContentInset}}
      colors={colors}
      curve={shape.curveNatural}
      showGrid={false}
    />
    <XAxis
      style={{height: xAxisHeight}}
      data={props.data}
      formatLabel={(value, index) => {
        if (props.data.length > 50) {
          return index % 5 === 0 ? props.data[index]?.time : '';
        } else if (props.data.length > 20) {
          return index % 2 === 0 ? props.data[index]?.time : '';
        } else {
          return props.data[index]?.time;
        }
      }}
      contentInset={horizontalContentInset}
      svg={axesXSvg}
    />
  </View>
</View>
0

There are 0 best solutions below