React Native – Chart won't re-render properly after data is modified (added)


I’m having trouble creating a chart with the Victory-Native library (click here to visit documentation for it)

I’m trying to create a dynamic chart. I’m storing it’s data in the state and want to modify if once the “Get Data” button is pressed. However, I ran into an issue that after 5 hours of trying, I cannot solve myself.

I’m still new to React and trying to figure out what’s going on so code probably looks like complete gibberish.

Instead of rerendering the line, the chart renders the line but kills my Y-axis domain.

This is the chart with correct domains and as it should look (when you feed static data to it):

Note: at this point, data[5] is still null and not being displayed

enter image description here

Once the blue “GET DATA” button is pressed, it requests the value that gets returned and placed into data[5]. However, this completely kills the Y-axis instead of re-rendering the line. What am I doing wrong? I want the line just to continue normaly with the domain that I set in the code.

This is what happens and shouldn’t happen:

enter image description here

How can I make the chart render new value correctly?


import React, {Component} from 'react';
import {AppRegistry, View, Button, Text} from 'react-native';
import { VictoryChart, VictoryLine, VictoryTheme } from "victory-native";

class testChart extends Component {

  constructor(props) {


    this.state = {

      data: [

        {data: 0, times: 0},
        {data: 42, times: 1},
        {data: 11, times: 2},
        {data: 54, times: 3},
        {data: 22, times: 4},
        {data: null, times: null}



  getDataBtn = () => {

    const that = this;


      let dataRsp = JSON.stringify(response.text());

      let strData = dataRsp.substring(dataRsp.indexOf('Data:'), dataRsp.indexOf('.'));

      var numData = strData.replace( /^\D+/g, ''); // ekstrakcija stevilk iz stringa[5].data = numData;[5].times = 5;

      that.setState({text: JSON.stringify(});


  render() {


        <Button color='blue'  title='Get Data' onPress={() => this.getDataBtn()} />
        <Text>Current DATA object value: {JSON.stringify(}</Text>
        <VictoryChart theme={VictoryTheme.material} domain={{x: [0, 10], y: [0, 100]}}>



AppRegistry.registerComponent('test', () => testChart);


I think its probably due to fact that numData is a string rather than an int. Try doing the following instead[5].data = parseInt(numData);

Answered By – coder hacker

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *