title: How to configure multiple bars on same chart using react-charts
body: <p>I have a react wherein I am able to display the. For this i am using <code>react-charts</code> library. </p>
  
  <p>To populate chart data I am making a API call and thereafter updating the state. I want to display multiple values for YAxis. </p>
  
  <p>My sample API response is:</p>
  
  <pre><code>{
  "result": 1,
  "data": [
      {
          "data1": "1272.00",
          "data2": "1183.00",
          "price": "131.00"
      },
      {
          "data1": "1328.00",
          "data2": "1468.00",
          "price": "132.00"
      },
      {
          "data1": "1829.00",
          "data2": "1445.00",
          "price": "133.00"
      },
   ]
  }
  </code></pre>
  
  <p>I want data1 and data2 values forYAxis and price for XAxis.</p>
  
  <p>React code:</p>
  
  <pre><code>import React, { Component } from "react";
  import Sidebar from "./Sidebar";
  import { Chart } from "react-charts";
  import axios from "axios";
  
  const qs = require("qs");
  
  class Home extends Component {
    state = {
      datelist: [],
      chart_data: []
    };
  
    componentDidMount() {
      this.getDatesList();
      axios
        .post(
          `http://127.0.0.1:8000/pricedata/`,
          qs.stringify({ date: "2019-01-11" })
        )
        .then(res =&gt; {
          if (res.data.result === 1) {
            this.setState({
              chart_data: [
                {
                  label: "Strike",
                  data: res.data.data.map(Object.values)
                }
              ]
            });
          } else {
            this.setState({ chart_data: [] });
          }
        });
    }
  
    getDatesList() {
      axios.get("http://127.0.0.1:8000/dateslist/").then(res =&gt; {
        if (res.data.result === 1) {
          this.setState({ datelist: res.data.data });
        } else {
          this.setState({ datelist: [] });
        }
      });
    }
  
    handleChange = event =&gt; {
      var dateval = event.target.value;
      axios
        .post(`http://127.0.0.1:8000/pricedata/`, qs.stringify({ date: dateval }))
        .then(res =&gt; {
          if (res.data.result === 1) {
            this.setState({
              chart_data: [
                {
                  label: "Strike",
                  data: res.data.data.map(Object.values)
                }
              ]
            });
          } else {
            this.setState({ chart_data: [] });
          }
        });
    };
  
    render() {
      return (
        &lt;div className="container container_padding"&gt;
          &lt;div className="row"&gt;
            &lt;Sidebar /&gt;
            &lt;div className="col-md-9 col-sm-9 col-xs-12"&gt;
              &lt;select
                className="form-control"
                style={{ width: "120px", marginBottom: "10px" }}
                onChange={this.handleChange}
              &gt;
                {this.state.datelist.map((date, i) =&gt; (
                  &lt;option value={date} key={i}&gt;
                    {date}
                  &lt;/option&gt;
                ))}
              &lt;/select&gt;
              &lt;div
                style={{
                  width: "400px",
                  height: "300px"
                }}
              &gt;
                &lt;Chart
                  data={this.state.chart_data}
                  series={{ type: "bar" }}
                  axes={[
                    { primary: true, type: "ordinal", position: "bottom" },
                    { type: "linear", position: "left", stacked: true }
                  ]}
                  primaryCursor
                  tooltip
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>How can I achieve this?</p>
  
  <p>Thanks in advance.</p>