Zoomable graph with dynamically generated data

I am trying make a zoomable graph with Recharts like the one from the example (http://recharts.org/en-US/examples/HighlightAndZoomLineChart) the problem is that because my data changes dynamically I generated the areas dynamically. In the available example I saw that they create different y-axis and their ids are connected to separate lines. Do I also need to generate y-axis for each area or is there an easier way? I tried by removing the y-axis id and use only one but this removes the zoomable functionality.

 draw = (data) => {
            return(
                data.map((x, i) => {
                    return <Area type='monotone' dataKey={labels[i]} stroke={colorCodes[i]} fill={colorCodes[i]} key={`area-chart-${i}` } animationDuration={300}/>
                })

            )
        };

<ResponsiveContainer height='100%' width='100%'>
                <AreaChart  data={data}
                            onMouseDown = { (e) => this.setState({refAreaLeft:e.activeLabel}) }
                            onMouseMove = { (e) => this.state.refAreaLeft && this.setState({refAreaRight:e.activeLabel}) }
                            onMouseUp = { this.zoom.bind( this ) }>
                    <CartesianGrid strokeDasharray="3 3"/>
                    <XAxis dataKey="t" interval={this.calculateIntervals()}  allowDataOverflow={true}  domain={[left, right]}/>
                    <YAxis />
                    <Tooltip/>
                    {this.draw(data)}
                    {
                        (refAreaLeft && refAreaRight) ? (
                            <ReferenceArea  x1={refAreaLeft} x2={refAreaRight}  strokeOpacity={0.3} /> ) : null

                    }
                    <Legend />
                </AreaChart>

recharts / recharts

Zoomable graph with dynamically generated data #1826