An area chart stacked by percentage

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}



/**                                                                                                                                                
 *   _HistoryGraph.scss                                                                                                                                          
 *   Doctor App                                                                                                                                                
 *                                                                                                                                                   
 *   Created by VinhTT  on 2018/03/14.                                                                                                                                                
 *   Copyright (c) 2017年 OMRON HEALTHCARE Co.,Ltd. All rights reserved.                                                                                                                                                
 */

.historyGraph {
  boder:1px #000 solid;
    position: relative;
    .modeButtons {
        position: absolute;
        top:-20px;
        
        z-index: 1;
        width: 130px;
        height: 30px;
        a {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        &.DAYS {
            right: 113px;
            .weeksMode {
                width: 60px;
                left: 75px;
                z-index: 1;
                img {
                    display: none;
                }
            }
        }
        &.WEEKS {
            right: 100px;
            .weeksMode {
                z-index: 0;
            }
            .daysMode {
                width: 60px;
                z-index: 1;
              ...

React

/**
     * Reset default graph
     *
     * @memberof HistoryGraph
     *
     */
    setDefaultGraph() {
        this.drugRows = {
            list: {},
            totalRow: 2
        };

        // graph config
        this.graphHeight = 600;
        this.graphDrugHeight = 35;
    }



    /**
     * Draw graph
     *
     * @memberof HistoryGraph
     *
     */
    drawGraph() {
        this.setDefaultGraph();
        this.f7.showIndicator();
        this.setState({
            isLoading: true,
            groupBar: {
                x: -9999,
                y: -9999
            },
            ihbBox: {
                x: -9999,
                y: -9999
            },
            conditionBox: {
                x: -9999,
                y: -9999
            },
            groupICV: {
                x: -9999,
                y: -9999
            },
            itemSelected: null
        });
        const isWeekMode = this.mode === MODE_TYPE.WEEKS;
        const mode = this.mode.toLowerCase();
        let startDate = this.startDate.format('YYYYMMDD');
        let endDate = this.endDate.format('YYYYMMDD');
        if (isWeekMode) {
            startDate = this.startDate
                .clone()
                .subtract(1, 'weeks')
                .format('YYYYMMDD');
        }

        this.getMeasureData({
            mode,
            startDate,
            endDate
        })
            .then(({ data }) => {
                try {
                    const { vitals = [], drugs = {}, conditionIcons = [] } = data || {};
                    this.vitals = vitals;
                    this.conditionIcons = conditionIcons;
                    this.drugs = drugs;
                    this.computeRowOfDrugs(this.drugs);
                    let { Pressure, Pulse } = this.prepareDataGraph(vitals);
                    const { count } = this.props;

                    this.setState(
                        {
                            isLoading: false,
               ...