diff --git a/client/src/views/Report/DonutChart/index.js b/client/src/views/CommonCharts/DonutChart/index.js
similarity index 74%
rename from client/src/views/Report/DonutChart/index.js
rename to client/src/views/CommonCharts/DonutChart/index.js
index f454919..05d0ea5 100644
--- a/client/src/views/Report/DonutChart/index.js
+++ b/client/src/views/CommonCharts/DonutChart/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     PieChart,
@@ -15,7 +16,7 @@ const CustomTooltip = ({ active, payload }) => {
     if (!active) {
         return null;
     }
-    if (payload.length <= 0) {
+    if (isNotDefined(payload) || payload.length <= 0) {
         return null;
     }
 
@@ -43,9 +44,12 @@ export default function DonutChart(props) {
     const {
         data,
         colorScheme,
+        donutChartHeight,
+        donutChartWidth,
     } = props;
 
-    if (data.length <= 0) {
+
+    if (isNotDefined(data) || data.length <= 0) {
         return (
             <div>
                 Nothings to show.
@@ -56,22 +60,24 @@ export default function DonutChart(props) {
     return (
         <div
             style={{
-                width: '100%',
-                height: 180,
+                width: donutChartWidth,
+                height: donutChartHeight,
+                marginBottom: 12,
             }}
         >
             <ResponsiveContainer>
                 <PieChart>
                     <Pie
                         data={data}
-                        innerRadius={65}
-                        outerRadius={85}
+                        innerRadius={donutChartHeight / 2.75}
+                        outerRadius={donutChartHeight / 2}
                         dataKey="value"
                     >
                         {data.map((d, index) => (
                             <Cell
                                 key={d.key}
                                 fill={colorScheme[index]}
+                                className={styles.cell}
                             />
                         ))}
                     </Pie>
@@ -82,7 +88,14 @@ export default function DonutChart(props) {
     );
 }
 
+DonutChart.defaultProps = {
+    donutChartHeight: 180,
+    donutChartWidth: '100%',
+};
+
 DonutChart.propTypes = {
+    donutChartHeight: PropTypes.number,
+    donutChartWidth: PropTypes.string,
     data: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
     colorScheme: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
 };
diff --git a/client/src/views/Report/DonutChart/styles.scss b/client/src/views/CommonCharts/DonutChart/styles.scss
similarity index 92%
rename from client/src/views/Report/DonutChart/styles.scss
rename to client/src/views/CommonCharts/DonutChart/styles.scss
index 55b6b07..fe0f495 100644
--- a/client/src/views/Report/DonutChart/styles.scss
+++ b/client/src/views/CommonCharts/DonutChart/styles.scss
@@ -14,3 +14,7 @@
     margin-bottom: 0;
     font-size: var(--font-size-super-large);
 }
+
+.cell {
+    cursor: pointer;
+}
diff --git a/client/src/views/Dashboard/GroupedBarChart/index.js b/client/src/views/Dashboard/GroupedBarChart/index.js
new file mode 100644
index 0000000..4d5c2ed
--- /dev/null
+++ b/client/src/views/Dashboard/GroupedBarChart/index.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    ComposedChart,
+    Line,
+} from 'recharts';
+
+function CustomizedLabel(props) {
+    const { x, y, width, value } = props;
+    return (
+        <text
+            x={x + width / 3}
+            y={y}
+            dy={-8}
+            fontSize={10}
+        >
+            {value}
+        </text>
+    );
+}
+
+export default function GroupedBarChart(props) {
+    const {
+        data,
+        lineKey,
+    } = props;
+
+    if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
+        return (
+            <div>Nothing to show</div>
+        );
+    }
+
+    return (
+        <ResponsiveContainer
+            height={250}
+            width="100%"
+        >
+            <ComposedChart
+                data={data.values}
+                margin={{ top: 50 }}
+            >
+                <XAxis dataKey="date" />
+                <YAxis />
+                <Tooltip />
+                <Legend align="center" />
+                {data.columns.map(column => (
+                    <Bar
+                        dataKey={column}
+                        key={column}
+                        fill={data.colors[column]}
+                        label={<CustomizedLabel />}
+                        style={{ cursor: 'pointer' }}
+                    />
+                ))}
+                {!!lineKey && (
+                    <Line
+                        dataKey={lineKey}
+                        stroke="#0591fb"
+                    />
+                )}
+            </ComposedChart>
+        </ResponsiveContainer>
+    );
+}
+
+GroupedBarChart.defaultProps = {
+    lineKey: '',
+};
+
+GroupedBarChart.propTypes = {
+    data: PropTypes.object.isRequired,
+    lineKey: PropTypes.string,
+};
diff --git a/client/src/views/Dashboard/Summary/index.js b/client/src/views/Dashboard/Summary/index.js
index 1d1b758..7bad927 100644
--- a/client/src/views/Dashboard/Summary/index.js
+++ b/client/src/views/Dashboard/Summary/index.js
@@ -21,6 +21,8 @@ import LanguagePeopleGroupDisability from '#components/LanguagePeopleGroupDisabi
 
 import { transformSoi } from '#utils/transform';
 
+import DonutChartRecharts from '../../CommonCharts/DonutChart';
+
 import styles from './styles.scss';
 
 const propTypes = {
@@ -40,6 +42,8 @@ const defaultProps = {
 const droppedKey = 'total_no_of_rc_records_dropped_during_the_month';
 const rcAwayKey = 'total_rc_temporarily_away';
 
+const donutChartHeight = 120;
+
 const ageKeyMap = {
     '<=6': '0 - 6',
     '7-12': '7 - 12',
@@ -70,6 +74,7 @@ const legendColorSelector = d => d.color;
 
 const donutColor = ['#41cf76', '#f44336'];
 const soiColorScheme = ['#ef5350', '#fff176', '#81c784'];
+
 const sectionPercents = [0.75, 0.1, 0.15];
 
 const mvcIndicatorKeySelector = d => d.label;
@@ -366,7 +371,7 @@ export default class Summary extends PureComponent {
         };
 
         const primaryUneducated = {
-            key: 'PrimaryUnEducated',
+            key: 'PrimaryUneducated',
             value: this.getValueFromMap(educationMap, '@PrimarySchoolAgeNoEducation') || 0,
             label: 'Primary School Age RC Not Involved in Education',
         };
@@ -397,7 +402,7 @@ export default class Summary extends PureComponent {
 
         const educated = education.filter(values => (
             values.key === 'PrimaryEducated'
-                || values.key === 'SecondaryEducated'
+            || values.key === 'SecondaryEducated'
         )).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
             value: 0,
             key: 'educated',
@@ -406,7 +411,7 @@ export default class Summary extends PureComponent {
 
         const uneducated = education.filter(values => (
             values.key === '@SecondarySchoolAgeNoEducation'
-                || values.key === '@PrimarySchoolAgeNoEducation'
+            || values.key === '@PrimarySchoolAgeNoEducation'
         )).reduce((a, b) => ({ ...a, value: a.value + b.value }), {
             value: 0,
             key: 'uneducated',
@@ -635,6 +640,18 @@ export default class Summary extends PureComponent {
         ].filter(v => v.value);
     })
 
+    getDonutDataWithName = memoize((donutData) => {
+        if (isFalsy(donutData)) {
+            return [];
+        }
+
+        const dataWithName = donutData.map(data => ({
+            ...data,
+            name: data.label,
+        }));
+        return dataWithName;
+    });
+
     render() {
         const {
             className,
@@ -682,6 +699,10 @@ export default class Summary extends PureComponent {
             mostVulnerableChildrenVulnerabilityMarker,
         );
 
+        const healthNutritionWithName = this.getDonutDataWithName(healthNutrition);
+        const educationInvolvementWithName = this.getDonutDataWithName(educationInvolvement);
+        const childMonitoringVizDataWithName = this.getDonutDataWithName(childMonitoringVizData);
+
         const infoText = `The data below is
             aggregated from sponsorship
             management report from ${noOfProjects}
@@ -717,7 +738,14 @@ export default class Summary extends PureComponent {
                 <div className={styles.item}>
                     <h3>Health / Nutrition</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={healthNutritionWithName}
+                            colorScheme={donutColor}
+                            className={styles.viz}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={healthNutrition}
                             sideLengthRatio={0.2}
@@ -726,7 +754,7 @@ export default class Summary extends PureComponent {
                             labelSelector={Summary.labelSelector}
                             labelModifier={Summary.labelModifierSelector}
                             colorScheme={donutColor}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={percentHealth}
@@ -739,7 +767,13 @@ export default class Summary extends PureComponent {
                 <div className={styles.item}>
                     <h3>Education</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={educationInvolvementWithName}
+                            colorScheme={donutColor}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={educationInvolvement}
                             sideLengthRatio={0.2}
@@ -748,7 +782,7 @@ export default class Summary extends PureComponent {
                             labelSelector={Summary.labelSelector}
                             labelModifier={Summary.labelModifierSelector}
                             colorScheme={donutColor}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={educationValues}
@@ -756,12 +790,23 @@ export default class Summary extends PureComponent {
                             keySelector={Summary.tableKeySelector}
                             renderer={KeyValue}
                         />
+
                     </div>
                 </div>
                 <div className={styles.item}>
                     <h3>Child Monitoring Status</h3>
                     <div className={styles.itemTableViz}>
-                        <DonutChart
+                        <DonutChartRecharts
+                            donutChartHeight={donutChartHeight}
+                            data={childMonitoringVizDataWithName}
+                            colorScheme={[
+                                '#41cf76',
+                                '#ef8c00',
+                                '#f44336',
+                            ]}
+                            donutChartWidth="50%"
+                        />
+                        {/* <DonutChart
                             className={styles.viz}
                             data={childMonitoringVizData}
                             hideLabel
@@ -774,7 +819,7 @@ export default class Summary extends PureComponent {
                                 '#ef8c00',
                                 '#f44336',
                             ]}
-                        />
+                        /> */}
                         <ListView
                             className={styles.table}
                             data={percentChild}
diff --git a/client/src/views/Dashboard/Summary/styles.scss b/client/src/views/Dashboard/Summary/styles.scss
index 5552d4a..c6dd3f1 100644
--- a/client/src/views/Dashboard/Summary/styles.scss
+++ b/client/src/views/Dashboard/Summary/styles.scss
@@ -41,12 +41,15 @@
         border: var(--width-separator-thin) solid var(--color-separator);
         background-color: var(--color-foreground);
         width: calc(100% - 2 * var(--spacing-medium));
+        padding-top: var(--spacing-medium);
 
         h3 {
             padding: var(--spacing-small) var(--spacing-medium);
             text-transform: capitalize;
             color: var(--color-accent);
             font-weight: var(--font-weight-bold);
+            text-align: center;
+            margin-bottom: var(--spacing-medium);
         }
 
         .date {
@@ -90,8 +93,7 @@
             }
 
             .viz {
-                margin-left: -var(--spacing-medium);
-                width: 180px;
+                flex-grow: 0;
             }
 
             .success {
diff --git a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
index 903a9d1..cdd085d 100644
--- a/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
+++ b/client/src/views/Dashboard/SummaryContainer/TrendSummary/index.js
@@ -15,6 +15,8 @@ import {
 import GroupedBarChart from '#rscz/GroupedBarChart';
 import Legend from '#rscz/Legend';
 
+import GroupedBarChartRecharts from '../../GroupedBarChart';
+
 import styles from './styles.scss';
 
 const propTypes = {
@@ -279,11 +281,11 @@ class TrendSummary extends React.PureComponent {
             values,
             columns: [
                 'Total Closed',
-                'Closed On',
+                'Closed On Time',
             ],
             colors: {
                 'Total Closed': '#44df96',
-                'Closed On': '#c25be2',
+                'Closed On Time': '#c25be2',
             },
         });
     });
@@ -330,7 +332,13 @@ class TrendSummary extends React.PureComponent {
             <div className={_cs(styles.trend, className)}>
                 <div className={_cs(styles.item)}>
                     <h3> RC Supply Trend </h3>
-                    <GroupedBarChart
+                    {rcData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={rcData}
+                            lineKey="Planned RC"
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={rcData}
                         groupSelector={groupSelector}
                         lineDataSelector={rcLineSelector}
@@ -342,11 +350,17 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Child Monitoring Trend </h3>
-                    <GroupedBarChart
+                    {childMonitoringData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={childMonitoringData}
+                            lineKey="Not Sighted More than 90 Days"
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={childMonitoringData}
                         groupSelector={groupSelector}
                         lineDataSelector={childMonitoringLineSelector}
@@ -358,11 +372,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Health Nutrition Trend </h3>
-                    <GroupedBarChart
+                    {healthData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={healthData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={healthData}
                         groupSelector={groupSelector}
                         showValue
@@ -373,11 +392,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Correspondence Trend </h3>
-                    <GroupedBarChart
+                    {correspondenceData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={correspondenceData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={correspondenceData}
                         groupSelector={groupSelector}
                         showValue
@@ -388,11 +412,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> Education Trend </h3>
-                    <GroupedBarChart
+                    {educationData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={educationData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={educationData}
                         groupSelector={groupSelector}
                         showValue
@@ -403,11 +432,16 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
                 <div className={_cs(styles.item)}>
                     <h3> SOI Trend </h3>
-                    <GroupedBarChart
+                    {soiData.values.length > 0 && (
+                        <GroupedBarChartRecharts
+                            data={soiData}
+                        />
+                    )}
+                    {/* <GroupedBarChart
                         data={soiData}
                         groupSelector={groupSelector}
                         showValue
@@ -418,7 +452,7 @@ class TrendSummary extends React.PureComponent {
                         keySelector={legendKeySelector}
                         labelSelector={legendLabelSelector}
                         colorSelector={legendColorSelector}
-                    />
+                    /> */}
                 </div>
             </div>
         );
diff --git a/client/src/views/Report/GroupedBarChart.js b/client/src/views/Report/GroupedBarChart.js
index abfd544..c79c2f5 100644
--- a/client/src/views/Report/GroupedBarChart.js
+++ b/client/src/views/Report/GroupedBarChart.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     BarChart,
@@ -18,7 +19,7 @@ export default function GroupedBarChart(props) {
     } = props;
 
 
-    if (data.values.length <= 0) {
+    if (isNotDefined(data) || isNotDefined(data.values) || data.values.length <= 0) {
         return (
             <div>Nothing to show</div>
         );
diff --git a/client/src/views/Report/HorizontalBar.js b/client/src/views/Report/HorizontalBar.js
index cb29251..0bf2f7d 100644
--- a/client/src/views/Report/HorizontalBar.js
+++ b/client/src/views/Report/HorizontalBar.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import {
     BarChart,
@@ -18,7 +19,7 @@ export default function HorizontalBar(props) {
         colorScheme,
     } = props;
 
-    if (data.length <= 0) {
+    if (isNotDefined(data) || data.length <= 0) {
         return (
             <div>
                 Nothings to show.
diff --git a/client/src/views/Report/index.js b/client/src/views/Report/index.js
index 4a08cc8..860a523 100644
--- a/client/src/views/Report/index.js
+++ b/client/src/views/Report/index.js
@@ -38,7 +38,7 @@ import {
     triColorScheme,
 } from './report-utils';
 
-import DonutChartReCharts from './DonutChart';
+import DonutChartReCharts from '../CommonCharts/DonutChart';
 import HorizontalBarRecharts from './HorizontalBar';
 import GroupedBarChartRecharts from './GroupedBarChart';
 
@@ -560,7 +560,7 @@ class Report extends PureComponent {
                             <div className={styles.vizContainer}>
                                 <div className={styles.viz}>
                                     <DonutChartReCharts
-                                        data={childDonutData}
+                                        data={healthDonut}
                                         colorScheme={triColorScheme}
                                     />
                                 </div>