docs: add demo of BarChart

recharts · May 11, 2020 · 6cc535c · 6cc535c
1 parent e7e1f9b
commit 6cc535c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/demo/component/BarChart.js b/demo/component/BarChart.js
@@ -103,6 +103,16 @@ const rangeData = [
   { day: '05-09', temperature: [-3, 5] },
 ];
 
+const pageData = [
+  { name: 'Page A', uv: 300, pv: 2600, amt: 3400 },
+  { name: 'Page B', uv: 400, pv: 4367, amt: 6400 },
+  { name: 'Page C', uv: 300, pv: 1398, amt: 2400 },
+  { name: 'Page D', uv: 200, pv: 9800, amt: 2400 },
+  { name: 'Page E', uv: 278, pv: 3908, amt: 2400 },
+  { name: 'Page F', uv: 189, pv: 4800, amt: 2400 },
+  { name: 'Page G', uv: 189, pv: 4800, amt: 2400 },
+];
+
 const RenderLabel = (props) => {
   const { x, y, textAnchor, key, value, index, ...others } = props;
 
@@ -465,6 +475,24 @@ export default class Demo extends Component {
           </BarChart>
         </div>
 
+        <p>Label alignment on Vertical BarChart when all data are positive</p>
+        <div className="area-chart-wrapper">
+          <BarChart
+            width={800}
+            height={800}
+            data={pageData}
+            margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+            layout="vertical"
+          >
+            <XAxis type="number" />
+            <YAxis dataKey="name" type="category" />
+            <Tooltip />
+            <Bar dataKey="pv" fill="#387908">
+              <LabelList position="right" />
+            </Bar>
+          </BarChart>
+        </div>
+
         <p>Label alignment on Vertical BarChart</p>
         <div className="area-chart-wrapper">
           <BarChart

diff --git a/demo/component/LineChart.js b/demo/component/LineChart.js
@@ -406,7 +406,7 @@ export default class Demo extends Component {
         <button onClick={this.handleChangeAnotherState}>switch another state</button>
         <br />
 
-        {/* <p>A simple LineChart with fixed domain y-axis</p>
+        <p>A simple LineChart with fixed domain y-axis</p>
         <div className="line-chart-wrapper">
           <LineChart width={400} height={400} data={data02} syncId="test">
             <CartesianGrid stroke="#f5f5f5" fill="#e6e6e6" />
@@ -533,7 +533,7 @@ export default class Demo extends Component {
             <Line dataKey='uv' type="monotone" stroke='#ff7300' strokeWidth={2} xAxisId={0} />
             <Line dataKey='pv' type="monotone" stroke='#387908' strokeWidth={2} xAxisId={1} />
           </LineChart>
-        </div> */}
+        </div>
 
         <p>LineChart of discrete values</p>
         <div className="line-chart-wrapper">
@@ -547,7 +547,7 @@ export default class Demo extends Component {
           </LineChart>
         </div>
 
-        {/* <p>LineChart with panoramic brush and custom tooltip styles</p>
+        <p>LineChart with panoramic brush and custom tooltip styles</p>
         <div className="line-chart-wrapper">
           <LineChart
             width={600} height={400} data={data03}
@@ -587,7 +587,7 @@ export default class Demo extends Component {
               <Line dataKey="value" data={s.data} name={s.name} key={s.name} />
             ))}
           </LineChart>
-        </div> */}
+        </div>
 
       </div>
     );