diff --git a/README.md b/README.md
index 9d099d80bb232fcf4960a1a9aefcef6c3d3c3526..d1b93395c8724b12ff504c98b98ebb0946041e9a 100644
--- a/README.md
+++ b/README.md
@@ -37,17 +37,15 @@ To use those components, add `dashboard-components.js` and needed polyfills to y
     "data":[["2017 September","70%"]]}"
   ></pan-table>
 
-  <pan-employees-graph data="{
-    "data":[
+  <pan-employees-graph data="[
       {"label":"2006","value":1},
       {"label":"2007","value":4}
-    ]}"
+    ]"
   ></pan-employees-graph>
   
-  <pan-salaries-graph data="{
-    "data":[
+  <pan-salaries-graph data="[
       {"month":10,"year":2015,"salary":7783,"workload":71}
-    ]}"
+    ]"
   ></pan-salaries-graph>
 </body>
 ```
diff --git a/src/components/EmployeesContainer.jsx b/src/components/EmployeesContainer.jsx
index 800fa23c6f28b14c4c766378977c2dc4ef7f8c50..ee5c2055fd5b10ef03b2fc7ee68abc8adf4def7c 100644
--- a/src/components/EmployeesContainer.jsx
+++ b/src/components/EmployeesContainer.jsx
@@ -74,7 +74,7 @@ class EmployeesContainer extends Component {
       <div>
         <Title>people</Title>
         <pan-employees-graph
-          data={JSON.stringify({ data: this.state.employees })}
+          data={JSON.stringify(this.state.employees)}
         />
         <pan-bubbles data={JSON.stringify(this.state.bubbles)} />
       </div>
diff --git a/src/components/SalariesContainer.jsx b/src/components/SalariesContainer.jsx
index 1b4e3b527e273faee1cbe7a7d23a3cb56f1f91c1..87485a854bea550c4e6c5dc330338929d839fbca 100644
--- a/src/components/SalariesContainer.jsx
+++ b/src/components/SalariesContainer.jsx
@@ -35,7 +35,7 @@ class SalariesContainer extends Component {
     return (
       <div>
         <pan-salaries-graph
-          data={JSON.stringify({ data: this.state.salaries })}
+          data={JSON.stringify(this.state.salaries)}
         />
 
         <Section>
diff --git a/src/webcomponents/pan-employees-graph.js b/src/webcomponents/pan-employees-graph.js
index 635f4aa03f4007ba5eb4dfeb36ecf83166670df6..9dd6e5f407845ebec2b22cea866ca069429faa1c 100644
--- a/src/webcomponents/pan-employees-graph.js
+++ b/src/webcomponents/pan-employees-graph.js
@@ -79,7 +79,7 @@ class PanEmployeesGraph extends StatelessWebComponent {
 
       <div class="GraphWrapper">
         <div class="Graph">
-          ${this.dataJson && this.dataJson.data.map(column => `
+          ${this.dataJson && this.dataJson.map(column => `
             <div class="Bar">
               <div class="ValueWrapper">
                 <div class="ValueHeight" style="height: calc(${this.itemHeight(column.value)}% + ${px(sizes.item)});">
@@ -101,7 +101,7 @@ class PanEmployeesGraph extends StatelessWebComponent {
 
   get scaleMax() {
     // Extend the height of the scale with 1 element
-    return (Math.max(...this.dataJson.data.map(element => element.value)) + 1);
+    return (Math.max(...this.dataJson.map(element => element.value)) + 1);
   }
 
   itemHeight(value) {
diff --git a/src/webcomponents/pan-salaries-graph.js b/src/webcomponents/pan-salaries-graph.js
index 6b7f56038d4ff0b165775881d89c582ab036b045..8171ec5a25a41a8ad42c463c1632f03ff87cc950 100644
--- a/src/webcomponents/pan-salaries-graph.js
+++ b/src/webcomponents/pan-salaries-graph.js
@@ -17,7 +17,7 @@ class PanSalariesGraph extends StatelessWebComponent {
   }
 
   get salaries() {
-    return JSON.parse(this.data).data;
+    return JSON.parse(this.data);
   }
 
   get scaleStep() { return 1000; }