diff --git a/src/ts/@overflow/metric/react/components/Metric.tsx b/src/ts/@overflow/metric/react/components/Metric.tsx
index 2a8855a..76dff46 100644
--- a/src/ts/@overflow/metric/react/components/Metric.tsx
+++ b/src/ts/@overflow/metric/react/components/Metric.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Button } from 'semantic-ui-react';
+import { Button, Label } from 'semantic-ui-react';
 import {
     BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line,
-    ResponsiveContainer, AreaChart, Area, PieChart, Pie,
+    ResponsiveContainer, AreaChart, Area, PieChart, Pie, ReferenceLine, Brush, ComposedChart,
 } from 'recharts';
 
 export interface StateProps {
@@ -46,16 +46,11 @@ export class Metric extends React.Component<Props, State> {
         });
     }
 
-    private tooltipPayload(): Array<any> {
-        return [{ name: '05-01', value: 12, unit: '%' }];
-    }
-
     private showTooltipData = (data: any) => {
-        if (data.active) {
-            console.log(data.payload[0].payload.user);
+        if (data.active && data.payload) {
             return (
                 <div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
-                    <p>{`Total Usage : ${data.payload[0].value}%`}</p>
+                    <p><b>{`Total Usage : ${data.payload[0].value}%`}</b></p>
                     <p>{`User : ${data.payload[0].payload.user}`}</p>
                     <p>{`Nice : ${data.payload[0].payload.nice}`}</p>
                     <p>{`System : ${data.payload[0].payload.system}`}</p>
@@ -66,32 +61,41 @@ export class Metric extends React.Component<Props, State> {
         return null;
     }
 
+
     public render(): JSX.Element {
 
+        const chartData = [
+            { name: 'Used', value: 80, fill: '#8884d8', unit: '%' },
+            { name: 'Free', value: 20, fill: '#82ca9d', unit: '%' },
+        ];
+
+
         return (
             <div>
 
                 <AreaChart syncId='anyId' width={800} height={300}
-                data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
+                    data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
                     <XAxis dataKey='id' />
-                    <YAxis />
+                    <YAxis type='number' domain={[0, 100]} unit='%' />
                     {/* <CartesianGrid stroke='#ccc' /> */}
                     <CartesianGrid strokeDasharray='5 5' />
                     <Tooltip content={this.showTooltipData.bind(this)} />
                     <Legend />
-                    <Area type='monotone' dataKey='usage' stroke='#8884d8' unit='%' name='Usage' />
+                    <Area type='monotone' dataKey='usage' stroke='#8884d8' fill='#82ca9d' unit='%' name='Usage' activeDot={{ r: 7 }} />
+                    <Brush startIndex={3} height={30} />
                 </AreaChart>
 
                 <LineChart syncId='anyId' width={800} height={300}
-                data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
+                    data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
                     <XAxis dataKey='id' />
                     <YAxis />
                     {/* <CartesianGrid stroke='#ccc' /> */}
                     <CartesianGrid strokeDasharray='3 3' />
                     <Tooltip />
                     <Legend />
-                    <Line type='monotone' dataKey='user' stroke='#8884d8' unit='jiffies'  />
-                    <Line type='monotone' dataKey='idle' stroke='#42454a' unit='jiffies'  />
+                    <ReferenceLine y={9000} label='Warning' stroke='red' />
+                    <Line type='monotone' dataKey='user' stroke='#8884d8' unit='jiffies' activeDot={{ r: 8 }} />
+                    <Line type='monotone' dataKey='idle' stroke='#42454a' unit='jiffies' activeDot={{ r: 8 }} />
                 </LineChart>
 
                 <BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
@@ -101,29 +105,41 @@ export class Metric extends React.Component<Props, State> {
                     <Tooltip />
                     <Legend />
                     <Bar dataKey='user' fill='#8884d8' unit='jiffies' />
-                    <Bar dataKey='idle' fill='#82ca9d' unit='jiffies'/>
+                    <Bar dataKey='idle' fill='#82ca9d' unit='jiffies' />
                 </BarChart>
 
-                <BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
+                <ComposedChart width={800} height={400} data={this.state.data}>
                     <XAxis dataKey='id' />
                     <YAxis />
-                    <CartesianGrid strokeDasharray='3 3' />
+                    <CartesianGrid stroke='#f5f5f5' />
                     <Tooltip />
                     <Legend />
-                    <Bar dataKey='user' fill='#ffc658' unit='jiffies' stackId='mixed'/>
-                    <Bar dataKey='idle' fill='#82ca9d' unit='jiffies' stackId='mixed'/>
-                    <Bar dataKey='nice' fill='#98ca41' unit='jiffies' stackId='mixed'/>
-                    <Bar dataKey='system' fill='#81da9d' unit='jiffies' stackId='mixed'/>
-                </BarChart>
+                    <Bar dataKey='user' fill='#ffc658' unit='jiffies' stackId='mixed' />
+                    <Bar dataKey='idle' fill='#82ca9d' unit='jiffies' stackId='mixed' />
+                    <Bar dataKey='nice' fill='#98ca41' unit='jiffies' stackId='mixed' />
+                    <Line dataKey='nice' type='monotone' stroke='#ff7300' unit='jiffies' />
+                </ComposedChart>
+
+                <PieChart width={800} height={400}>
+                    <text fontSize='20px' x='50%' y='50%' dy={8} textAnchor='middle' fill='#8884d8'>
+                         {chartData[0].value}%
+                    </text>
+                    <Pie data={chartData}
+                        cx='50%'
+                        cy='50%'
+                        outerRadius={80}
+                        innerRadius={60}
+                        startAngle={90}
+                        endAngle={-270}
+                    />
+
+                </PieChart>
+
 
-                {/* <PieChart width={730} height={300}>
-                    <Tooltip />
-                    <Pie data={data01} cx='50%' cy='50%' outerRadius={50} fill='#8884d8' />
-                    <Pie data={data02} cx='50%' cy='50%' innerRadius={60} outerRadius={80} fill='#82ca9d' label />
-                </PieChart>; */}
             </div>
         );
     }
 
 }
 
+