React-native-svg-charts: Graph goes to minus rather it haven't minus values

[Danushka50]

Hi,

My Graph goes to minus. But is haven't any minus values
Please Help...

This is my Code

This is the data valus
[5, 1, 89, 1, 5, 1, 0, 0, 1, 0, 0, 2, 2, 2, 1, 1, 1, 1, 3, 2, 1]

`render() {

let data = this.dataGraph();
console.log("dcscad", data);

const Tooltip = ({ x, y }) => (
  <G
    x={x(this.state.index) - (75 / 2)}
    key={'tooltip'}
    onPress={() => console.log('tooltip clicked')}>
    <G y={0}>
      <Rect
        height={50}
        width={80}
        stroke={''}
        fill={colorsGraph.rectFill}
        ry={10}
        rx={10} />

      {this.renderToolTipText(this.state.value)}

    </G>
    <G x={75 / 2}>
      {/* <Line
            y1={ 50 + 40 }
            y2={ y(data_graph[ 5 ]) }
            stroke={ 'grey' }
            strokeWidth={ 2 }
          /> */}
      <Circle
        cy={y(data[this.state.index])}
        r={6}
        //stroke={colors.primaryColor2}
        //strokeWidth={2}
        fill={colors.primaryColor2}
      />
    </G>
  </G>
);

const chartGraph = () => {
  return (
    <View style={styles.chartScroll}>
      <AreaChart
        style={[styles.chart, { width: this.calculateWidth() }]}
        dataPoints={this.dataGraph()}
        fillColor={colorsGraph.chartFill}
        strokeColor={colors.secondaryColor1}
        contentInset={{ top: 100, bottom: 30, left: 50, right: 50 }}
        extras={this.state.extras}
        renderExtra={({ item, ...args }) => item(args)}
        showGrid={false}
        gridMax={this.state.graphFillHeight} //this is the total of the graph data
        //spacing = {100}
        renderDecorator={({ x, y, index, value }) => (
          <G>
            <Circle
              key={index}
              cx={x(index)}
              cy={y(value)}
              r={4.5}
              stroke={colorsGraph.colorWhite}
              strokeWidth={5}
              fill={colors.secondaryColor1}
              onPress={() => this.setState({ extras: [Tooltip], index: index })}

            />
            <Line
              x1={x(index)}
              y1={"250"}
              x2={x(index)}
              y2={"70"}
              stroke={colorsGraph.chartVerticalGrid}
              strokeWidth="0.3"
            />
          </G>
        )}
      />
      <XAxis
        style={{ }}
        values={this.dataGraphXAxis()}
        formatLabel={value => `${value}`}
        chartType={XAxis.Type.BAR}
        labelStyle={styles.xAxisLable}
        contentInset={{ left: 20, right: 20 }}
      />
    </View>
  );
};



return (
  <View style={styles.container}>
    <ScrollView horizontal={true}>
      {chartGraph()}
    </ScrollView>
    <View>
      <View
        style={styles.chartHorozontalLine} />
      <View>
        <View>
          {this.renderView(this.state.value,this.state.data_type)}
        </View>
      </View>
    </View>
  </View>
  // </MenuContext>
);

}`

following image is the output

[JesperLekland]

That's just the interpolation for the smooth curve. Use a different curve prop than the default

[Danushka50]

Ok. Thank you...