Chart is not getting updated with updated array in react native

I wrote down a function in my code that updates the data array with user input. Data array is used to construct the bar graph in my code. Currently, my data array in the chart is getting updated upon user input, but not my chart.

How would I update this chart along with user input. Below is the code so far-

import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View,SafeAreaView,TextInput,Button,Picker,Alert} from 'react-native';
import Chart from 'react-native-chartjs';

const datas = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datas: [12, 19, 3, 5, 2, 10],
}

const chartConfiguration = {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      maintainAspectRatio : false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
};

export default class App extends Component {
  constructor(props) {
    super(props);
  this.state = {
      filterLimit: 100,
      lessThanOrGreaterThan: 'lessThan',
      chartConfiguration : chartConfiguration,
      key: Date.now()
    };
}
componentWillMount() {
  this.datas = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datas: [12, 19, 3, 5, 2, 10],
  }
}
applyFilter() {
    const value = this.state.filterLimit;
    const lessThanOrGreaterThan = this.state.lessThanOrGreaterThan;
    console.log(lessThanOrGreaterThan);
    console.log(this.datas.datas)
    this.datas.datas.forEach((datas) => {
      if (lessThanOrGreaterThan === "lessThan") {
        this.datas.datas = this.datas.datas.map((v) => {
          if (v <= value) return v;
          else return 0;
        });
      } else {
        this.datas.datas = this.datas.datas.map((v) => {
          if (v >= value) return v;
          else return 0;
        });
      }
    });
    console.log(this.datas.datas)
    datas.datas = this.datas.datas
    console.log(datas.datas)
    chartConfiguration.data.datasets[0].data = this.datas.datas
    console.log(chartConfiguration.data.datasets[0].data)
    this.setState({ key: Date.now() });
  }
  render() {
    return (
     <SafeAreaView style={styles.chartContainer}>
      <View style = {{ flex : 1 }}>
          <Chart chartConfiguration = {
            this.state.chartConfiguration
          }
       defaultFontSize={20}/>
      </View>
      <View>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
          numeric
          placeholder="Filter Limit"
          value={this.state.filterLimit}
          onChangeText={(text) => this.setState({ filterLimit: text })}
        />
        <Button
        onPress={()=>Alert.alert(this.state.filterLimit)}
        title="Filter Limit"
        color="#841584"
      />
      </View>
    <View style={styles.pickerContainer}>
        <Picker
          selectedValue={this.state.lessThanOrGreaterThan}
          style={{ height: 50, width: 150 }}
          onValueChange={this.handlelessThanOrGreaterThan}
        >
          <Picker.Item label ="Less Than" value="lessThan" />
          <Picker.Item label="Greater Than" value="greaterThan" />
        </Picker>
      </View>
       <View style={styles.filterContainer}>
        <Button
          onPress={() => this.applyFilter()}
          title = "Apply Filter"
          color="#841584"
      />
      </View>
    </SafeAreaView>
    );
  }
} 

chartConfiguration is a required variable to go with the Chart component. The chart won't re-render, even though the chartConfiguration data array changes within the applyFilter function.



Read more here: https://stackoverflow.com/questions/64940229/chart-is-not-getting-updated-with-updated-array-in-react-native

Content Attribution

This content was originally published by tallpotato at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: