Merge pull request #3 from PrinceSumberia/responsive-barchart

Make barcharts responsive

Author: PrinceSumberia

src/components/Barchart.js

@@ -1,9 +1,18 @@
 import React, { Component } from "react";
-import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { withStyles } from "@material-ui/styles";
+import styles from "../styles/BarchartStyles";
 
-export default class Barchart extends Component {
+class Barchart extends Component {
   render() {
-    const { data, isLoading, dataKey, stroke } = this.props;
+    const { data, isLoading, dataKey, stroke, classes } = this.props;
     let result;
     try {
       const updatedData = data.slice(1).slice(-50);
@@ -26,21 +35,25 @@ export default class Barchart extends Component {
     } catch (err) {}
 
     return (
-      <div className="barcharts">
-        {!isLoading && (
-          <BarChart
-            width={350}
-            height={150}
-            data={result}
-            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-          >
-            <XAxis dataKey="date" />
-            <YAxis />
-            <Tooltip />
-            <Bar dataKey={dataKey} fill={stroke} />
-          </BarChart>
-        )}
+      <div className={classes.barcharts}>
+        <ResponsiveContainer>
+          {!isLoading && (
+            <BarChart
+              width={350}
+              height={150}
+              data={result}
+              margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+            >
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey={dataKey} fill={stroke} />
+            </BarChart>
+          )}
+        </ResponsiveContainer>
       </div>
     );
   }
 }
+
+export default withStyles(styles)(Barchart);

src/styles/BarchartStyles.js

@@ -0,0 +1,6 @@
+export default {
+  barcharts: {
+    width: "100%",
+    height: "17rem",
+  },
+};