added card for charts with borders

src/Chart.tsx

@@ -3,7 +3,7 @@ import {
 } from 'recharts';
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Title } from 'bloomer';
+import { Card, CardImage, CardHeader, CardHeaderTitle } from 'bloomer';
 const randomColor = require('randomcolor');
 import * as Papa from 'papaparse';
 
@@ -53,9 +53,14 @@ export class Chart extends React.Component<any, any> {
     //   return (<text>{props.name}</text>);
     // };
     return (
-      <div>
-        <Title isSize={4}>{_.capitalize(this.props.chartColumn)}</Title>
-        <ResponsiveContainer width="100%" height={500}>
+      <Card>
+        <CardHeader>
+          <CardHeaderTitle className='is-centered'>
+            {_.capitalize(this.props.chartColumn)}
+          </CardHeaderTitle>
+        </CardHeader>
+        <CardImage>
+          <ResponsiveContainer width="100%" height={300}>
             <PieChart>
               <Pie data={chartData} dataKey='value' outerRadius={100} labelLine={true} label={true}>
                 {
@@ -68,7 +73,8 @@ export class Chart extends React.Component<any, any> {
               <Tooltip />
             </PieChart>
           </ResponsiveContainer>
-      </div>
+        </CardImage>
+      </Card>
     )
   }
 }