diff --git a/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutput.js b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutput.js
new file mode 100644
index 00000000..848c89d0
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutput.js
@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+import SingleOutput from './SingleOutput';
+
+const GraphOutput = ({ headers, calling_context, data }) => {
+  return (
+    <div>
+      <div key={Math.random()} className="six wide stackable stretched grid container">
+        <br /><br />
+        {headers.map((header, index) =>
+          [<SingleOutput
+              key={Math.random()}
+              calling_context={calling_context}
+              index={index}
+              header={header}
+              data={data[index]}
+           />,
+            <br key={Math.random()} />,
+            <br key={Math.random()} />]
+        )}
+      </div>
+    </div>
+  );
+};
+
+GraphOutput.propTypes = {
+  headers: PropTypes.array.isRequired,
+  calling_context: PropTypes.string.isRequired,
+  data: PropTypes.array
+};
+
+export default GraphOutput;
diff --git a/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputPreview.js b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputPreview.js
new file mode 100644
index 00000000..eaebf24d
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputPreview.js
@@ -0,0 +1,63 @@
+import React, { PropTypes } from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import AreaGraphOutput from './AreaGraphOutput';
+
+
+class AreaGraphOutputPreview extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      headers: props.functions.getHeaders(),
+      open: true
+    };
+    this.hidePreviewDialog = props.functions.hidePreviewDialog;
+    this.handleOk = this.handleOk.bind(this);
+  }
+
+
+  handleOk() {
+    this.hidePreviewDialog();
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        key={0}
+        label="Ok"
+        primary
+        keyboardFocused
+        onTouchTap={this.handleOk}
+      />
+    ];
+    return (<Dialog
+      title="Preview Area Graph Output Component"
+      actions={actions}
+      modal
+      autoScrollBodyContent
+      open={this.state.open}
+            >
+      <AreaGraphOutput
+        headers={this.state.headers}
+        calling_context="demo"
+        data={
+          new Array(this.state.headers.length).fill(
+            [
+              { x: 1, y: 2 },
+              { x: 2, y: 5 },
+              { x: 3, y: 8 },
+              { x: 4, y: 9 },
+              { x: 5, y: 13 }
+            ]
+          )
+        }
+      />
+    </Dialog>);
+  }
+}
+
+AreaGraphOutputPreview.propTypes = {
+  functions: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputPreview;
diff --git a/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseCard.js b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseCard.js
new file mode 100644
index 00000000..668e18b4
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseCard.js
@@ -0,0 +1,158 @@
+import React, { PropTypes } from 'react';
+import { browserHistory } from 'react-router';
+import CustomCard from '../../stateless/cards';
+import AreaGraphOutputShowcaseModifyDialog from './AreaGraphOutputShowcaseModifyDialog';
+import AreaGraphOutputPreview from './AreaGraphOutputPreview';
+import toastr from 'toastr';
+
+class AreaGraphOutputShowcaseCard extends React.Component {
+  constructor(props) {
+    super(props);
+    let initHeaders = [];
+    if (props.demoProps.outputComponentDemoModel.baseComponentId === 6) {
+      initHeaders = props.demoProps.outputComponentDemoModel.props;
+      this.selected = props.demoProps.outputComponentDemoModel.baseComponentId === props.demoProps.selected;
+    }
+    this.state = {
+      headers: initHeaders,
+      modifyDialogDisplay: false,
+      previewDialogDisplay: false
+    };
+    this.demoModel = props.demoProps.demoModel;
+    this.user = props.demoProps.user;
+    this.outputComponentDemoModel = props.demoProps.outputComponentDemoModel;
+    this.outputComponentDemoModelActions = props.demoProps.outputComponentDemoModelActions;
+    this.forwardAddress = props.demoProps.forwardAddress;
+    this.forwardAddressAlternate = props.demoProps.forwardAddressAlternate;
+    this.showModifyDialog = this.showModifyDialog.bind(this);
+    this.getHeaderRealLength = this.getHeaderRealLength.bind(this);
+    this.showPreviewDialog = this.showPreviewDialog.bind(this);
+    this.updateOutputComponentModel = this.updateOutputComponentModel.bind(this);
+    this.updateHeaders = this.updateHeaders.bind(this);
+    this.getHeaders = this.getHeaders.bind(this);
+    this.hideModifyDialog = this.hideModifyDialog.bind(this);
+    this.hidePreviewDialog = this.hidePreviewDialog.bind(this);
+  }
+
+  showModifyDialog() {
+    this.setState({ modifyDialogDisplay: true });
+  }
+
+  hideModifyDialog() {
+    this.setState({ modifyDialogDisplay: false });
+  }
+
+  showPreviewDialog() {
+    this.setState({ previewDialogDisplay: true });
+  }
+
+  hidePreviewDialog() {
+    this.setState({ previewDialogDisplay: false });
+  }
+
+  updateOutputComponentModel() {
+    if (Object.keys(this.demoModel).length === 0) {
+      toastr.error('Registration info not found! Register again');
+      browserHistory.push('/');
+    } else {
+      let propsToStore = [];
+      this.state.headers.map((header) => {
+        propsToStore.push(header);
+      });
+      this.outputComponentDemoModelActions.updateOutputComponentModel({
+        id: this.demoModel.id,
+        userid: this.user.id,
+        baseComponentId: 6,
+        props: propsToStore
+      }).then(() => {
+        if (this.props.demoProps.params.type === 'modify') {
+          browserHistory.push('/ngh/user');
+        } else {
+          if (this.forwardAddressAlternate) {
+            if (this.demoModel.status === 'input') {
+              browserHistory.push(this.forwardAddress);
+            } else if (this.demoModel.status === 'demo') {
+              browserHistory.push(this.forwardAddressAlternate);
+            }
+          } else {
+            browserHistory.push(this.forwardAddress);
+          }
+        }
+      });
+    }
+  }
+
+  updateHeaders(data) {
+    let dataToUpdate = [];
+    data.map((value) => {
+      dataToUpdate.push(value);
+    });
+    this.setState({ headers: dataToUpdate });
+  }
+
+  getHeaderRealLength() {
+    let counter = 0;
+    this.state.headers.map(() => {
+      counter += 1;
+    });
+    return counter;
+  }
+
+  getHeaders() {
+    return this.state.headers;
+  }
+
+  render() {
+    return (
+      <div>
+        <CustomCard
+          header="Area Graph Output"
+          width="five"
+          context="selection"
+          selected={this.selected}
+          centeredParent
+          centeredSegment
+          displayData = {[
+            `Number of Outputs: ${this.getHeaderRealLength()}`
+          ]}
+          buttonData = {[
+            {
+              label: 'Modify',
+              onDeployClick: () => this.showModifyDialog()
+            },
+            {
+              label: 'Preview',
+              onDeployClick: () => this.showPreviewDialog()
+            },
+            {
+              label: 'Save',
+              onDeployClick: () => this.updateOutputComponentModel()
+            }
+          ]}
+        />
+        {this.state.modifyDialogDisplay && <AreaGraphOutputShowcaseModifyDialog
+          functions={{
+            updateHeaders: this.updateHeaders,
+            hideModifyDialog: this.hideModifyDialog,
+            getHeaders: this.getHeaders
+          }}
+                                           />}
+
+        {this.state.previewDialogDisplay && <AreaGraphOutputPreview
+          functions={{
+            getHeaders: this.getHeaders,
+            hidePreviewDialog: this.hidePreviewDialog
+          }}
+                                            />}
+      </div>
+
+    );
+  }
+}
+
+AreaGraphOutputShowcaseCard.propTypes = {
+  demoProps: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputShowcaseCard;
+
diff --git a/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseModifyDialog.js b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseModifyDialog.js
new file mode 100644
index 00000000..241a9e0b
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/AreaGraphOutputShowcaseModifyDialog.js
@@ -0,0 +1,135 @@
+import React, { PropTypes } from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import OverloadedAreaGraphHeader from './OverloadedAreaGraphHeader';
+
+class AreaGraphOutputShowcaseModifyDialog extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      textFields: this.makeTextFieldsFromParentHeaders(props.functions.getHeaders()),
+      headers: props.functions.getHeaders(),
+      open: true
+    };
+    this.updateHeadersInParent = props.functions.updateHeaders;
+    this.getLabelsFromParent = props.functions.getLabels;
+    this.hideModifyDialog = props.functions.hideModifyDialog;
+    this.makeTextFieldsFromParentHeaders = this.makeTextFieldsFromParentHeaders.bind(this);
+    this.addLocalHeaders = this.addLocalHeaders.bind(this);
+    this.deleteLocalHeaders = this.deleteLocalHeaders.bind(this);
+    this.addMoreTextFields = this.addMoreTextFields.bind(this);
+    this.getNewField = this.getNewField.bind(this);
+    this.handleOk = this.handleOk.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  makeTextFieldsFromParentHeaders(allHeaders) {
+    let tempText = [];
+    allHeaders.map((header, index) => {
+      let currentIndex = allHeaders.findIndex((x) => x === header);
+      tempText[currentIndex] = (
+        <div>
+          <TextField
+            key={Math.random()}
+            hintText="Header"
+            defaultValue={header}
+            onChange={(e) => this.addLocalHeaders(currentIndex, e.target.value)}
+          />
+          &nbsp;&nbsp;&nbsp;
+          <RaisedButton
+            label="Delete"
+            primary
+            onMouseDown={() => this.deleteLocalHeaders(currentIndex)}
+          />
+        </div>
+      );
+    });
+    return tempText;
+  }
+
+  addLocalHeaders(index, data) {
+    let temptext = Object.assign([], this.state.headers);
+    temptext[index] = data;
+    this.setState({ headers: temptext });
+  }
+
+  deleteLocalHeaders(elementId) {
+    let temptext = Object.assign([], this.state.headers);
+    let temptextfield = Object.assign([], this.state.textFields);
+    delete temptext[elementId];
+    delete temptextfield[elementId];
+    this.setState({ headers: temptext });
+    this.setState({ textFields: temptextfield });
+  }
+
+  getNewField() {
+    return (
+      <OverloadedAreaGraphHeader
+        data={{
+          headerLength: this.state.headers.length,
+          addLocalHeaders: this.addLocalHeaders,
+          deleteLocalHeaders: this.deleteLocalHeaders
+        }}
+      />
+    );
+  }
+
+  addMoreTextFields() {
+    let tempstate = Object.assign([], this.state.textFields);
+    tempstate.push(this.getNewField());
+    this.setState({ textFields: tempstate });
+  }
+
+  handleOk() {
+    this.hideModifyDialog();
+    this.updateHeadersInParent(this.state.headers);
+  }
+
+  handleCancel() {
+    this.hideModifyDialog();
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        key={0}
+        label="Ok"
+        primary
+        keyboardFocused
+        onTouchTap={this.handleOk}
+      />,
+      <FlatButton
+        key={1}
+        label="Cancel"
+        primary
+        onTouchTap={this.handleCancel}
+      />
+    ];
+    return (
+      <Dialog
+        title="Modify Area Graph Output Component"
+        actions={actions}
+        modal
+        autoScrollBodyContent
+        open={this.state.open}
+      >
+        {this.state.textFields.map((field) =>
+          [field, <br key={Math.random()} />]
+        )}
+        <RaisedButton key={Math.random()}
+                      label="Add Output Field"
+                      primary
+                      onClick={() => this.addMoreTextFields()}
+                      style={{ marginTop: '2%' }}
+        />
+      </Dialog>);
+  }
+}
+
+AreaGraphOutputShowcaseModifyDialog.propTypes = {
+  functions: PropTypes.object.isRequired
+};
+
+export default AreaGraphOutputShowcaseModifyDialog;
diff --git a/src/components/outputcomponents/AreaGraphOutput/OverloadedAreaGraphHeader.js b/src/components/outputcomponents/AreaGraphOutput/OverloadedAreaGraphHeader.js
new file mode 100644
index 00000000..3b5838e1
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/OverloadedAreaGraphHeader.js
@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+import TextField from 'material-ui/TextField';
+import RaisedButton from 'material-ui/RaisedButton';
+
+class OverloadedAreaGraphHeader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elementId: ''
+    };
+    this.headerLength = props.data.headerLength;
+    this.addLocalHeadersToParent = props.data.addLocalHeaders;
+    this.deleteLocalHeadersFromParent = props.data.deleteLocalHeaders;
+  }
+
+  componentWillMount() {
+    this.setState({ elementId: this.headerLength });
+  }
+
+  componentDidMount() {
+    this.addLocalHeadersToParent(this.headerLength, '');
+  }
+
+  render() {
+    return (
+      <div>
+        <TextField
+          hintText="Header"
+          onChange={(e) => this.addLocalHeadersToParent(this.headerLength, e.target.value)}
+        />
+        &nbsp;&nbsp;&nbsp;
+        <RaisedButton
+          label="Delete"
+          primary
+          onMouseDown={() => this.deleteLocalHeadersFromParent(this.state.elementId)}
+        />
+      </div>
+    );
+  }
+}
+
+OverloadedAreaGraphHeader.propTypes = {
+  data: PropTypes.object.isRequired
+};
+
+export default OverloadedAreaGraphHeader;
+
diff --git a/src/components/outputcomponents/AreaGraphOutput/SingleOutput.js b/src/components/outputcomponents/AreaGraphOutput/SingleOutput.js
new file mode 100644
index 00000000..b36920a2
--- /dev/null
+++ b/src/components/outputcomponents/AreaGraphOutput/SingleOutput.js
@@ -0,0 +1,108 @@
+/*eslint-disable react/forbid-prop-types */
+import React, { PropTypes } from 'react';
+import Dialog from 'material-ui/Dialog';
+import { VictoryArea, VictoryChart } from 'victory';
+
+class singleOutput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      data: []
+    };
+    this.showGraphFull = this.showGraphFull.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  componentWillMount() {
+
+    if (this.props.data instanceof Array && this.props.data.length > 0) {
+      const dataToPlot = [];
+      this.props.data.map((dataPoint) => {
+        const pointToPut = Object.assign({}, dataPoint);
+        pointToPut.x = parseInt(dataPoint.x, 10);
+        pointToPut.y = parseInt(dataPoint.y, 10);
+        dataToPlot.push(pointToPut);
+      });
+
+      this.setState({ data: dataToPlot });
+
+    }
+  }
+
+  showGraphFull() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+  }
+
+  render() {
+    return (
+      <div className="ui card centered"
+           id={`output-text-${this.props.index}`}
+           style={{ cursor: 'pointer' }}
+           onClick={this.showGraphFull}
+      >
+        <div className="content">
+          <div className="header">{this.props.header}</div>
+        </div>
+        <div className="content">
+          <div className="ui small feed">
+            <div className="event">
+              <div className="content">
+                <div className="ui very padded text summary">
+                  <VictoryChart domainPadding={20}>
+                    <VictoryArea
+                      style={{
+                        data: {
+                          fill: 'tomato'
+                        }
+                      }}
+                      data={this.state.data}
+                      x={'x'}
+                      y={'y'}
+                    />
+                  </VictoryChart>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Dialog
+          title={this.props.header}
+          modal={false}
+          open={this.state.open}
+          autoScrollBodyContent
+          onRequestClose={this.handleClose}
+        >
+          <div className="ui row">
+            <VictoryChart domainPadding={20}>
+              <VictoryArea
+                style={{
+                  data: {
+                    fill: 'tomato'
+                  }
+                }}
+                data={this.state.data}
+                x={'x'}
+                y={'y'}
+              />
+            </VictoryChart>
+          </div>
+        </Dialog>
+
+      </div>
+    );
+  }
+}
+
+singleOutput.propTypes = {
+  header: PropTypes.string.isRequired,
+  data: PropTypes.any,
+  index: PropTypes.number.isRequired
+};
+
+export default singleOutput;
diff --git a/src/components/outputcomponents/BarGraphOutput/BarGraphOutput.js b/src/components/outputcomponents/BarGraphOutput/BarGraphOutput.js
index c8a606bb..848c89d0 100644
--- a/src/components/outputcomponents/BarGraphOutput/BarGraphOutput.js
+++ b/src/components/outputcomponents/BarGraphOutput/BarGraphOutput.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import SingleOutput from './SingleOutput';
 
-const TextOutput = ({ headers, calling_context, data }) => {
+const GraphOutput = ({ headers, calling_context, data }) => {
   return (
     <div>
       <div key={Math.random()} className="six wide stackable stretched grid container">
@@ -22,10 +22,10 @@ const TextOutput = ({ headers, calling_context, data }) => {
   );
 };
 
-TextOutput.propTypes = {
+GraphOutput.propTypes = {
   headers: PropTypes.array.isRequired,
   calling_context: PropTypes.string.isRequired,
   data: PropTypes.array
 };
 
-export default TextOutput;
+export default GraphOutput;
diff --git a/src/components/outputcomponents/index.js b/src/components/outputcomponents/index.js
index a3b25db2..d68eb220 100644
--- a/src/components/outputcomponents/index.js
+++ b/src/components/outputcomponents/index.js
@@ -5,12 +5,14 @@ import ImageOutput from './ImageOutput/ImageOutput';
 import BarGraphOutput from './BarGraphOutput/BarGraphOutput';
 import ScatterGraphOutput from './ScatterGraphOutput/ScatterGraphOutput';
 import PieChartOutput from './PieChartOutput/PieChartOutput';
+import AreaGraphOutput from './AreaGraphOutput/AreaGraphOutput';
 
 import TextOutputShowcaseCard from './TextOutput/TextOutputShowcaseCard';
 import ImageOutputShowcaseCard from './ImageOutput/ImageOutputShowcaseCard';
 import BarGraphOutputShowCaseCard from './BarGraphOutput/BarGraphOutputShowcaseCard';
 import ScatterGraphOutputShowCaseCard from './ScatterGraphOutput/ScatterGraphOutputShowcaseCard';
 import PieChartOutputShowCaseCard from './PieChartOutput/PieChartOutputShowcaseCard';
+import AreaGraphOutputShowCaseCard from './AreaGraphOutput/AreaGraphOutputShowcaseCard';
 
 export function getOutputComponentById(id, headers, calling_context, data) {
   switch (id) {
@@ -24,6 +26,8 @@ export function getOutputComponentById(id, headers, calling_context, data) {
     return <ScatterGraphOutput headers={headers} calling_context={calling_context} data={data} />;
   case 5:
     return <PieChartOutput headers={headers} calling_context={calling_context} data={data} />;
+  case 6:
+    return <AreaGraphOutput headers={headers} calling_context={calling_context} data={data} />;
   default:
     return <div>Null</div>;
   }
@@ -45,6 +49,9 @@ export function getAllOutputComponentsForShowcase(data) {
     />,
     <PieChartOutputShowCaseCard key={Math.random()}
                                     demoProps={data}
+    />,
+    <AreaGraphOutputShowCaseCard key={Math.random()}
+                                demoProps={data}
     />
   ];
 }