react-charts “stacked:true” is not working

问题

I've created a chart in ReactJS using react-charts, with multiple bars.

This is my component:

import React, { Component } from "react";
import { Chart } from "react-charts";
import axios from "axios";
const qs = require("qs");

class Volume extends Component {
  state = {
    load_vol_chart: true,
    volume_chart_data: []
  };

  componentDidMount() {
    this.getVolumeChartData();
  }

  getVolumeChartData() {
    var name = this.props.name;
    axios
      .post(
        `http://api.mydomain.in/details/`,
        qs.stringify({ type: name })
      )
      .then(res => {
        if (res.data.result === 1) {
          this.setState({
            volume_chart_data: [
              {
                label: "Label1",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: (vol.volume * vol.percentage) / 100
                }))
              },
              {
                label: "Label2",
                data: res.data.data2.map(vol => ({
                  x: vol.created_at,
                  y: vol.volume
                }))
              }
            ],
            load_vol_chart: false
          });
        }
      });
  }

  render() {
    return (
      <div className="inner-content" style={{ marginTop: "12px" }}>
        <h3>
          <i className="fa fa-caret-right" /> {"  "}
          {this.props.symbol}: Volume
        </h3>
        {this.state.load_vol_chart ? null : (
          <div
            style={{
              width: "100%",
              height: "400px",
              marginTop: "35px",
              marginBottom: "10px"
            }}
          >
            <Chart
              data={this.state.volume_chart_data}
              series={{ type: "bar" }}
              axes={[
                { primary: true, type: "ordinal", position: "left" },
                { position: "bottom", type: "linear" }
              ]}
              primaryCursor
              secondaryCursor
              tooltip
            />
          </div>
        )}
      </div>
    );
  }
}

export default Volume;

What I want is:

1. The Label1 bar is calculated with some formula. In charts tooltip, I want to display a additional value like: vol.percent. Also Can I show this percent on bar as a label on it?

2. I want these charts to stacked. I've tried stacked:true, it's not working.

How can I achieve these?

Thanks in advance.

来源：https://stackoverflow.com/questions/54703320/react-charts-stackedtrue-is-not-working