ReCharts.Js阴影区域，用于图表的完整高度（并与Brush，dataMax一致）

Question

I am trying to create an area that is to be shaded based on the presents of a key. I want the shading to be from min-to-max in the Y-axis and I want the max to be dependent on the current-local max of the dataset (with respect to Brush).

I tried to play around with the internals of ReChart.js such methods as getTicksOfAxis and getValueByDataKey because I know that the Y-axis already knows the local max, so I wouldn't have to reinvent the wheel. Anyone have any solutions

Fiddle With Me

 const {ComposedChart, Area ,LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,Brush} = Recharts; const data = [ {name: 'Page A', pv: 2400, max: 10800}, {name: 'Page q', pv: 4800, max: 10800}, {name: 'Page w', pv: 1398}, {name: 'Page e', pv: 0}, //I don't want this part max to squish the pv values since Max should be of the local max. {name: 'Page r', pv: 300, max: 10800}, {name: 'Page t', pv: 200, max: 10800}, {name: 'Page y', pv: 0}, {name: 'Page u', pv: 500}, {name: 'Page i', pv: 1398, max: 10800}, {name: 'Page o', pv: 4300, max: 10800}, {name: 'Page p', pv: 10800 }, {name: 'Page [', pv: 3908 }, {name: 'Page ]',pv: 4800, max: 10800}, {name: 'Page F', pv: 3800, max: 10800}, {name: 'Page G', pv: 4300, max: 10800}, ]; const SimpleLineChart = React.createClass({ render () { return ( <ComposedChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}> <XAxis dataKey="name"/> <YAxis type="number"/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> <Area type="monotone" dataKey="max" stroke="#8884d8" activeDot={{r: 8}}/> <Brush/> </ComposedChart> ); } }) ReactDOM.render( <SimpleLineChart />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

Answer 1

Suitable Example The graph provided is what I was aiming for where the shaded area is representative of some datapoint. I was able to create a sawtooth appearance (working with the brush) by providing a method for the "local-max" ei:

---

let data=[{ line-graph:<arbitrary_value>, shaded-areas:local_max()},...]; let local_max=()=>{return this.state.localMax}

---

I then had to discover the local maxes, which involves getting the brushes start/endIndex and saving those to state.