Chart at home screen

client/src/components/Home.js

@@ -1,5 +1,9 @@
 import React, { Component } from 'react'
 
+// Components
+
+//import ChartUsers from './home/ChartUsers'
+
 // Images
 
 import PortraitImage from '../img/portrait.jpg'
@@ -8,12 +12,30 @@ import NatureImage from '../img/nature.jpg'
 import StreetImage from '../img/street.jpg'
 import StarsImage from '../img/stars.jpg'
 
+import {XYPlot, LineSeries} from 'react-vis';
+
 class Home extends Component {
 
   render(){
 
+    const data = [
+      {x: 0, y: 8},
+      {x: 1, y: 5},
+      {x: 2, y: 4},
+      {x: 3, y: 9},
+      {x: 4, y: 1},
+      {x: 5, y: 7},
+      {x: 6, y: 6},
+      {x: 7, y: 3},
+      {x: 8, y: 2},
+      {x: 9, y: 0}
+    ];
+
     return (
       <div>
+      <XYPlot height={300} width={300}>
+        <LineSeries data={data} />
+      </XYPlot>
 
       <section className="container section scrollspy" id="photos">
         <div className="row">

client/src/components/home/ChartUsers.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import {
+  XYPlot,
+  XAxis,
+  YAxis,
+  HorizontalGridLines,
+  VerticalGridLines,
+  LineSeries
+} from 'index';
+
+const data = [];
+
+for (let i = 0; i < 20; i++) {
+  const series = [];
+  for (let j = 0; j < 100; j++) {
+    series.push({x: j, y: (i / 10 + 1) * Math.sin(Math.PI * (i + j) / 50)});
+  }
+  data.push({color: i, key: i, data: series, opacity: 0.8});
+}
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <XYPlot
+        width={300}
+        height={300}
+        colorType="linear"
+        colorDomain={[0, 9]}
+        colorRange={['yellow', 'orange']}
+        >
+        <HorizontalGridLines />
+        <VerticalGridLines />
+        <XAxis />
+        <YAxis />
+        {data.map(props => <LineSeries {...props}/>)}
+      </XYPlot>
+    );
+  }
+}