diff --git a/src/components/singlebar.js b/src/components/singlebar.js
index 3f7ec540..42929b1f 100644
--- a/src/components/singlebar.js
+++ b/src/components/singlebar.js
@@ -1,80 +1,41 @@
-import React from "react";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  LabelList,
-  CartesianGrid
-} from "recharts";
+import React from "react"
+import { BarChart, Bar, LabelList, CartesianGrid } from "recharts"
 
-const barColors = ["#685e4a", "#b7b7b7", "#d9d9d9", "#f3f3f3"];
+const getPct = (value, total) => { return Math.round((value/total)*100) }
+const getLabel = (entry, total, field, label) => { return `${label}: ${getPct(entry[field], total)}%` }
 
-function getTotal (payload) {
-  return payload[0].value + payload[1].value + payload[2].value + payload[3].value
-}
+export default function SingleBarChart ({emissions_data}) {
+  // sum all emissions fields except year
+  const totalEmissions = Object.entries(emissions_data[0])
+    .filter(([key,_val]) => key !== 'year')
+    .reduce((acc, [_key,val]) => acc + val, 0)
 
-function calcPercent (payload, index) {
-  return (100 * payload[index].value.toFixed(1) / getTotal(payload)).toFixed(1)
-}
-
-// const renderLabel = (props, text) =>{
-//   const { x, y, width, height, value } = props
-//   return (
-//     <span>{text}: {value}</span>
-//     )
-// }
-
-const getLabel=(props, label) => {return  label}
-
-
-//Render the stacked bar.
-  export default function SingleBarChart({emissions_data}) {
   return (
     <BarChart
       barSize={250}
       width={500}
-      height={300}
+      height={600}
       data={emissions_data}
       margin={{
-        top: 20,
+        top: 0,
         right: 30,
         left: 20,
         bottom: 5
       }}
     >
       <CartesianGrid strokeDasharray="0 99" />
-      <XAxis dataKey=" " hide={true} />
-      <YAxis
-        axisLine={false}
-        tickLine={false}
-        label={{
-          angle: -90,
-          value: "CO2 (million metric tons)",
-          position: "insideBottomLeft"
-        }}
-      />
-      <Bar
-        dataKey="dumps_farms_industrial_other"
-        stackId="a"
-        fill={barColors[0]}
-      >
-         <LabelList
-          content={props => getLabel(props, 'Dumps, Farms, Industrial & Other')}
-          position="insideTopLeft"
-        /> 
+      <Bar dataKey="dumps_farms_industrial_other" stackId="a" fill="#98886c">
+        <LabelList valueAccessor={entry => getLabel(entry, totalEmissions, 'dumps_farms_industrial_other', 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> 
       </Bar>
-     <Bar dataKey="transportation" stackId="a" fill={barColors[1]}>
-        <LabelList 
-        content={props => getLabel(props, 'Transportation')}
-        position="insideTopLeft" /> 
+      <Bar dataKey="transportation" stackId="a" fill="#b7b7b7">
+        <LabelList valueAccessor={entry => getLabel(entry, totalEmissions, 'transportation', 'Transportation')} position="insideTopLeft" /> 
       </Bar>
-       <Bar dataKey="buildings" stackId="a" fill={barColors[2]}>
-        <LabelList content={props => getLabel(props, 'Buildings')} position="insideTopLeft" />
+      <Bar dataKey="buildings" stackId="a" fill="#d9d9d9">
+        <LabelList valueAccessor={entry => getLabel(entry, totalEmissions, 'buildings', 'Buildings')} position="insideTopLeft" />
       </Bar>
-      <Bar dataKey="dirty_power" stackId="a" fill={barColors[3]}>
-        <LabelList content={props => getLabel(props, 'Dirty Power')} position="insideTopLeft" />
+      <Bar dataKey="dirty_power" stackId="a" fill="#f3f3f3">
+        <LabelList valueAccessor={entry => getLabel(entry, totalEmissions, 'dirty_power', 'Dirty Power')} position="insideTopLeft" />
       </Bar>
     </BarChart>
-  );
+  )
 }
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 5db2d3ef..f3f02fea 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -49,7 +49,7 @@ const IndexPage = ({data}) => {
         cut climate pollution by <strong>{cutPerYearPrcnt} a year.</strong>
       </p>
 
-      <SingleBarChart emissions_data={us_2018_emissions}/>
+      <StackedBarChart emissions_data={us_emissions}/>
 
       <p className='h2 text-center mt-5 mb-5'>
         When it comes to solving the climate crisis there's one main thing
@@ -57,9 +57,7 @@ const IndexPage = ({data}) => {
 
 
       <div className="d-flex align-items-center">
-        <div className="h2">
-          [stacked bar graph of emissions source]
-        </div>
+        <SingleBarChart emissions_data={us_2018_emissions}/>
 
         <div className="ml-5">
           <p className="h3 font-weight-boldest mt-5 mb-5">