Fix demo of overlay brush for AreaChart demo. Add class to Brush back…

…ground so it can be styled
billneff79 · Oct 10, 2016 · 7dbed47 · 7dbed47
1 parent 7b5aab2
commit 7dbed47
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/demo/component/AreaChart.js b/demo/component/AreaChart.js
@@ -304,9 +304,17 @@ export default class AreaChartDemo extends Component {
               dot
             />
           </AreaChart>
-					<AreaChart width={400} height={70} data={this.state.data}
+
+					<style type="text/css">{`
+						.recharts-brush-background {
+						  fill-opacity: 0;
+						}
+					`}</style>
+
+					<AreaChart width={800} height={70} data={this.state.data}
+  margin={{ top: 20, right: 80, left: 20, bottom: 5 }}
   syncId="brushTest"
-     >
+					>
             <Area
               type="monotone"
               dataKey="uv"
@@ -315,7 +323,8 @@ export default class AreaChartDemo extends Component {
               fillOpacity="1"
               fill="gray"
             />
-					<Brush dataKey="name" overlayChart affectedCharts="others" />
+					<YAxis style={{ display: 'none' }} />
+					<Brush className="overlayBrush" dataKey="name" overlayChart affectedCharts="others" />
           </AreaChart>
         </div>
 

diff --git a/src/cartesian/Brush.js b/src/cartesian/Brush.js
@@ -299,6 +299,7 @@ class Brush extends Component {
 
     return (
       <rect
+        className="recharts-brush-background"
         stroke={stroke}
         fill={fill}
         x={x}