How to make a dynamic Chart in ReactJS

So there are 4 data arrays that i added together by index and i want to make a platform filter for data ( if you uncheck facebook all analytics show except for the facebook data so i made dummy data using 5 arrays) In React JS so i want to make it a filter if he unchecks a buttonit deosnt show the data of facebook in the array hence the curve goes down , the original curve is the sum of all the data in the arrays .the problem is i dont know how to setup if else statements in a way that if twitter is unchecked it takes only the twitter data or facebook since it is setting the value to zero after checking or unchecking twitter

let AAdata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
let Tdata = [100, 600, 500, 190, 140, 141, 150, 160, 110, 120, 190, 300];
let Fdata = [500, 300, 30, 200, 180, 151, 150, 160, 140, 120, 180, 100];
let Idata = [40, 350, 111, 140, 130, 161, 150, 160, 150, 130, 170, 600];
let Adata = [60, 150, 222, 160, 190, 118, 150, 160, 180, 130, 160, 400];
let Wdata = [30, 360, 333, 150, 140, 111, 150, 160, 120, 130, 150, 500];
let chartdata = [];

let dashboardSummerChart = (facebookIsTrue , twitterIsTrue) => {

  if (facebookIsTrue) {
    chartdata = AAdata.map(function (num, idx) {
      return num + Fdata[idx];
    });


  }  if (twitterIsTrue) {
    chartdata = AAdata.map(function (num, idx) {
      return num + Tdata[idx];
    });


  }

   else {
    chartdata = AAdata.map(function (num, idx) {
      return num + [];
    });

  }



return {
    data: canvas => {
      var ctx = canvas.getContext("2d");
      var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
      gradientStroke.addColorStop(0, "#18ce0f");
      gradientStroke.addColorStop(1, chartColor);
      var gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
      gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
      gradientFill.addColorStop(1, hexToRGB("#18ce0f", 0.4));
      return {
        labels: ["12pm,", "3pm", "6pm", "9pm", "12am", "3am", "6am", "9am"],
        datasets: [
          {
            label: "Email Stats",
            borderColor: "#18ce0f",
            pointBorderColor: "#FFF",
            pointBackgroundColor: "#18ce0f",
            pointBorderWidth: 2,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 1,
            pointRadius: 4,
            fill: true,
            backgroundColor: gradientFill,
            borderWidth: 2,
            data: chartdata
          }
        ]
      };
    },
    options: gradientChartOptionsConfiguration

  }

THE file in which contains the chart and the data passed

handleButtonfb2 = () => {
    this.setState((prevState) => {
return{
      fbtoggle: !prevState.fbtoggle
}

    })

  }

  handleButtontw = () => {
this.setState((prevState) => {
  return {
    twtoggle: !prevState.twtoggle
  }
})

  }


  createTableData() {
    var tableRows = [];
    for (var i = 0; i < table_botdata.length; i++) {
      tableRows.push(
        <tr key={i}>

          <td>{table_botdata[i].Intent}</td>
          <td className="text-right">{table_botdata[i].type}</td>
          <td className="text-right">{table_botdata[i].percentage}</td>
        </tr>
      );
    }
    return tableRows;
  };
  createTableData2() {
    var tableRows = [];
    for (var i = 0; i < table_botdata2.length; i++) {
      tableRows.push(
        <tr key={i}>

          <td>{table_botdata2[i].Time}</td>

          <td className="text-right">{table_botdata2[i].percentage}</td>
        </tr>
      );
    }
    return tableRows;
  };






  createTableData3() {
    var tableRows = [];
    for (var i = 0; i < table_botdata3.length; i++) {
      tableRows.push(
        <tr key={i}>

          <td>{table_botdata3[i].Location}</td>

          <td className="text-right">{table_botdata3[i].percentage}</td>
        </tr>
      );
    }
    return tableRows;
  };






  render() {

    let x = dashboardSummerChart(this.state.fbtoggle, this.state.twtoggle);


    return (

      <div>
        <PanelHeader
          content={<ButtonGroup size="lg">
            <Button color="info" onClick={this.handleButtonfb2}> Facebook</Button>
            <Button color="info" onClick={this.handleButtontw}> Twitter</Button>
            <Button color="info" onClick={this.handlewebsiteclick}>Website</Button>
            <Button color="info" onClick={this.handleandroidclick}> Android</Button>
          </ButtonGroup>} />




        <div className="content">
          <Row>
            <Col xs={12} md={4}>
              <Card className="card-chart">
                <CardHeader>
                  <CardCategory>Average Session Length</CardCategory>
                  <CardTitle tag="h2">20 min</CardTitle>

                </CardHeader>
                <CardBody>
                  <div className="chart-area">

                    <Line
                      data={x}
                      options={dashboardSummerChart.options}
                    />
                  </div>

                </CardBody>
                <CardFooter>
                  <Stats>
                    {[
                      {
                        i: "now-ui-icons arrows-1_refresh-69",
                        t: "Just Updated"
                      }
                    ]}
                  </Stats>
                </CardFooter>
              </Card>
            </Col>


            <Col xs={12} md={4}>
              <Card className="card-chart">
                <CardHeader>
                  <CardCategory>Average conversations per user

            </CardCategory>
                  <CardTitle tag="h2">12K</CardTitle>

                </CardHeader>
                <CardBody>
                  <div className="chart-area">

                    <Line
                      data={x.data}
                      options={dashboardSummerChart.options}
                    />
                  </div>

                </CardBody>
                <CardFooter>
                  <Stats>
                    {[
                      {
                        i: "now-ui-icons arrows-1_refresh-69",
                        t: "Just Updated"
                      }
                    ]}
                  </Stats>
                </CardFooter>
              </Card>
            </Col>