diff --git a/src/areachart.js b/src/areachart.js
index 7385255..426b9ce 100644
--- a/src/areachart.js
+++ b/src/areachart.js
@@ -1,114 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
 var d3 = require('d3');
-var Chart = require('./common').Chart;
-
-var XAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxes(props);
-  },
-
-  componentDidMount: function() {
-    this._renderAxes(this.props);
-  },
-
-  _renderAxes: function(props) {
-
-    var unit = props.xAxisTickInterval.unit;
-    var interval = props.xAxisTickInterval.interval;
-
-    var xAxis = d3.svg.axis()
-      .ticks(d3.time[unit], interval)
-      .scale(props.xScale)
-      .orient("bottom");
-
-    var node = this.refs.xaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "x axis")
-      .call(xAxis);
-
-    // Style each of the tick lines
-    d3.select('.x.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.select('.x.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    var t = "translate(0," + this.props.height + ")";
-    return (
-      <g
-        ref='xaxis'
-        className="x axis"
-        transform={t}
-      >
-      </g>
-    );
-  }
-
-});
-
-
-var YAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxes(props);
-  },
-
-  componentDidMount: function() {
-    this._renderAxes(this.props);
-  },
-
-  _renderAxes: function(props) {
-
-    var yAxis = d3.svg.axis()
-      .ticks(props.yAxisTickCount)
-      .scale(props.yScale)
-      .orient("left");
-
-    var node = this.refs.yaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "y axis")
-      .call(yAxis);
-
-    // Style each of the tick lines
-    d3.selectAll('.y.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.selectAll('.y.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    return (
-      <g
-        ref='yaxis'
-        className="y axis"
-      >
-      </g>
-    );
-  }
-
-});
-
+var common = require('./common');
+var Chart = common.Chart;
+var XAxis = common.XAxis;
+var YAxis = common.YAxis;
 
 var Area = React.createClass({
 
@@ -129,7 +25,7 @@ var Area = React.createClass({
 
     return (
       <path
-        className="area"
+        className="area-path"
         d={this.props.path}
         fill={this.props.fill}
       />
@@ -215,6 +111,7 @@ var AreaChart = React.createClass({
             height={this.props.height}
           />
           <XAxis
+            xAxisClassName="area x axis"
             xScale={xScale}
             xAxisTickInterval={this.props.xAxisTickInterval}
             margin={margin}
@@ -222,6 +119,7 @@ var AreaChart = React.createClass({
             height={this.props.height}
           />
           <YAxis
+            yAxisClassName="area y axis"
             yScale={yScale}
             margin={margin}
             yAxisTickCount={this.props.yAxisTickCount}
diff --git a/src/barchart.js b/src/barchart.js
index 7da0d70..5f1f5f4 100644
--- a/src/barchart.js
+++ b/src/barchart.js
@@ -1,7 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
 var d3 = require('d3');
-var Chart = require('./common').Chart;
+var common = require('./common');
+var Chart = common.Chart;
+var XAxis = common.XAxis;
+var YAxis = common.YAxis;
 var _ = require('lodash');
 
 
@@ -33,106 +36,6 @@ var Bar = React.createClass({
   }
 });
 
-var XAxis = React.createClass({
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  _renderAxis: function(props) {
-    var xAxis = d3.svg.axis()
-      .scale(props.xScale)
-      .orient("bottom");
-
-    var node = this.refs.barxaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "barx axis")
-      .call(xAxis);
-
-    // Style each of the tick lines
-    d3.select('.barx.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.select('.barx.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "none")
-
-  },
-
-  render: function() {
-    var t = "translate(0," + this.props.height + ")"
-    return (
-      <g
-        ref='barxaxis'
-        className="barx axis"
-        transform={t}
-      >
-      </g>
-    );
-  }
-
-});
-
-
-var YAxis = React.createClass({
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  _renderAxis: function(props) {
-    var yAxis = d3.svg.axis()
-      .ticks(props.yAxisTickCount)
-      .scale(props.yScale)
-      .orient("left");
-
-    var node = this.refs.baryaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "bary axis")
-      .call(yAxis);
-
-    // Style each of the tick lines
-    d3.selectAll('.bary.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", "#000");
-
-    // Style the main axis line
-    d3.selectAll('.bary.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", "#000")
-
-  },
-
-  render: function() {
-    return (
-      <g
-        ref='baryaxis'
-        className="bary axis"
-      >
-      </g>
-    );
-  }
-
-});
-
 var DataSeries = React.createClass({
 
   propTypes: {
@@ -229,6 +132,7 @@ var BarChart = React.createClass({
             fill={this.props.fill}
           />
           <YAxis
+            yAxisClassName="bar y axis"
             yScale={yScale}
             margins={margins}
             yAxisTickCount={this.props.yAxisTickCount}
@@ -236,6 +140,7 @@ var BarChart = React.createClass({
             height={this.props.height - topBottomMargins}
           />
           <XAxis
+            xAxisClassName="bar x axis"
             xScale={xScale}
             data={this.props.data}
             margins={margins}
diff --git a/src/common.js b/src/common.js
index e3234cf..ae68185 100644
--- a/src/common.js
+++ b/src/common.js
@@ -13,3 +13,183 @@ exports.Chart = React.createClass({
     );
   }
 });
+
+exports.XAxis = React.createClass({
+
+  propTypes: {
+    xAxisClassName: React.PropTypes.string.isRequired,
+    orient: React.PropTypes.oneOf(['top', 'bottom']),
+    xScale: React.PropTypes.func.isRequired,
+    height: React.PropTypes.number.isRequired,
+    fill: React.PropTypes.string,
+    stroke: React.PropTypes.string,
+    tickStroke: React.PropTypes.string,
+    strokeWidth: React.PropTypes.string,
+    hideOrigin: React.PropTypes.bool
+  },
+
+  getDefaultProps: function() {
+    return {
+      xAxisClassName: 'x axis',
+      orient: 'bottom',
+      fill: "none",
+      stroke: "none",
+      tickStroke: "#000",
+      strokeWidth: "none",
+      hideOrigin: false
+    };
+  },
+
+
+  componentDidMount: function() {
+    this._renderAxis(this.props);
+  },
+
+  componentWillReceiveProps: function(props) {
+    this._renderAxis(props);
+  },
+
+  _renderAxis: function(props) {
+    var xAxis = d3.svg.axis()
+      .scale(props.xScale)
+      .orient("bottom");
+
+    if (props.xAxisTickInterval) {
+      xAxis.ticks(d3.time[props.xAxisTickInterval.unit], props.xAxisTickInterval.interval);
+    } else if (props.xAxisTickCount) {
+      xAxis.ticks(props.xAxisTickCount);
+    }
+
+    xAxisClassSelect = props.xAxisClassName.replace(/ /g, '.');
+
+    if (xAxisClassSelect[0] != '.') {
+      xAxisClassSelect = '.' + xAxisClassSelect;
+    }
+
+    var node = this.refs.xaxis.getDOMNode();
+
+    d3.select(node)
+      .attr("class", props.xAxisClassName)
+      .call(xAxis);
+
+    // Style each of the tick lines
+    d3.select(xAxisClassSelect)
+      .selectAll('line')
+      .attr("shape-rendering", "crispEdges")
+      .attr("stroke", props.tickStroke);
+
+    // Style the main axis line
+    d3.select(xAxisClassSelect)
+      .select('path')
+      .attr("shape-rendering", "crispEdges")
+      .attr("fill", props.fill)
+      .attr("stroke", props.stroke)
+      .attr("stroke-width", props.strokeWidth);
+
+    if (props.hideOrigin) {
+      // Hack to hide the x axis origin
+      var originSelect = xAxisClassSelect + ' g:first-child';
+      d3.selectAll(originSelect).style("opacity","0");
+    }
+
+  },
+
+  render: function() {
+    var props = this.props;
+    var t = "translate(0," + props.height + ")";
+    return (
+      <g
+        ref='xaxis'
+        className={props.xAxisClassName}
+        transform={t}
+      >
+      </g>
+    );
+  }
+
+});
+
+
+exports.YAxis = React.createClass({
+
+  propTypes: {
+    yAxisClassName: React.PropTypes.string,
+    orient: React.PropTypes.oneOf(['left', 'right']),
+    yScale: React.PropTypes.func.isRequired,
+    fill: React.PropTypes.string,
+    stroke: React.PropTypes.string,
+    tickStroke: React.PropTypes.string,
+    strokeWidth: React.PropTypes.string
+  },
+
+  getDefaultProps: function() {
+    return {
+      yAxisClassName: 'y axis',
+      orient: 'left',
+      fill: "none",
+      stroke: "#000",
+      tickStroke: "#000",
+      strokeWidth: "none"
+    };
+  },
+
+  componentDidMount: function() {
+    this._renderAxis(this.props);
+  },
+
+  componentWillReceiveProps: function(props) {
+    this._renderAxis(props);
+  },
+
+  _renderAxis: function(props) {
+
+    var yAxis = d3.svg.axis()
+      .ticks(props.yAxisTickCount)
+      .scale(props.yScale)
+      .orient(this.props.orient);
+
+    if (props.yAxisTickCount) {
+      yAxis.ticks(props.yAxisTickCount);
+    } else if (props.yAxisTickInterval) {
+      yAxis.ticks(d3.time[props.yAxisTickInterval.unit], props.yAxisTickInterval.interval);
+    }
+
+    yAxisClassSelect = props.yAxisClassName.replace(/ /g, '.');
+
+    if (yAxisClassSelect[0] != '.') {
+      yAxisClassSelect = '.' + yAxisClassSelect;
+    }
+
+    var node = this.refs.yaxis.getDOMNode();
+
+    d3.select(node)
+      .attr("class", props.yAxisClassName)
+      .call(yAxis);
+
+    // Style each of the tick lines
+    d3.selectAll(yAxisClassSelect)
+      .selectAll('line')
+      .attr("shape-rendering", "crispEdges")
+      .attr("stroke", props.tickStroke);
+
+    // Style the main axis line
+    d3.selectAll(yAxisClassSelect)
+      .select('path')
+      .attr("shape-rendering", "crispEdges")
+      .attr("fill", props.fill)
+      .attr("stroke", props.stroke)
+
+  },
+
+  render: function() {
+    var props = this.props;
+    return (
+      <g
+        ref='yaxis'
+        className={props.yAxisClassName}
+      >
+      </g>
+    );
+  }
+
+});
diff --git a/src/linechart.js b/src/linechart.js
index 78d225d..bfd26a4 100644
--- a/src/linechart.js
+++ b/src/linechart.js
@@ -1,8 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
 var d3 = require('d3');
-var Chart = require('./common').Chart;
-
+var common = require('./common');
+var Chart = common.Chart;
+var XAxis = common.XAxis;
+var YAxis = common.YAxis;
 
 var Line = React.createClass({
 
@@ -62,110 +64,6 @@ var Circle = React.createClass({
 
 });
 
-var XAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  render: function() {
-    var t = "translate(0," + this.props.height + ")"
-    return (
-      <g
-        ref='linexaxis'
-        className="linex axis"
-        transform={t}
-      >
-      </g>
-    );
-  },
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  _renderAxis: function(props) {
-    var xAxis = d3.svg.axis()
-      .scale(props.scaleX)
-      .orient("bottom");
-
-    var node = this.refs.linexaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "linex axis")
-      .style("fill", props.color)
-      .call(xAxis);
-
-    // Style each of the tick lines
-    var lineXAxis = d3.select('.linex.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", props.color);
-
-    // Style the main axis line
-    d3.select('.linex.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", props.color)
-      .attr("stroke-width", "1");
-
-    // Hides the x axis origin
-    d3.selectAll(".linex.axis g:first-child").style("opacity","0");
-  }
-
-});
-
-
-var YAxis = React.createClass({
-
-  componentWillReceiveProps: function(props) {
-    this._renderAxis(props);
-  },
-
-  render: function() {
-    return (
-      <g
-        ref='lineyaxis'
-        className="liney axis"
-      >
-      </g>
-    );
-  },
-
-  componentDidMount: function() {
-    this._renderAxis(this.props);
-  },
-
-  _renderAxis: function(props) {
-    var yAxis = d3.svg.axis()
-      .ticks(props.yAxisTickCount)
-      .scale(props.scaleY)
-      .orient("left");
-
-    var node = this.refs.lineyaxis.getDOMNode();
-
-    d3.select(node)
-      .attr("class", "liney axis")
-      .style("fill", props.color)
-      .call(yAxis);
-
-    // Style each of the tick lines
-    d3.selectAll('.liney.axis')
-      .selectAll('line')
-      .attr("shape-rendering", "crispEdges")
-      .attr("stroke", props.color);
-
-    // Style the main axis line
-    d3.selectAll('.liney.axis')
-      .select('path')
-      .attr("shape-rendering", "crispEdges")
-      .attr("fill", "none")
-      .attr("stroke", props.color)
-  }
-
-});
-
 var DataSeries = React.createClass({
 
   propTypes: {
@@ -186,17 +84,17 @@ var DataSeries = React.createClass({
     var self = this;
     var interpolatePath = d3.svg.line()
         .x(function(d) {
-          return self.props.scaleX(d.x);
+          return self.props.xScale(d.x);
         })
         .y(function(d) {
-          return self.props.scaleY(d.y);
+          return self.props.yScale(d.y);
         })
         .interpolate(this.props.interpolate);
 
     var circles = [];
 
     this.props.data.forEach(function(point, i) {
-      circles.push(<Circle cx={this.props.scaleX(point.x)} cy={this.props.scaleY(point.y)} r={this.props.pointRadius} fill={this.props.color} key={this.props.seriesName + i} />);
+      circles.push(<Circle cx={this.props.xScale(point.x)} cy={this.props.yScale(point.y)} r={this.props.pointRadius} fill={this.props.color} key={this.props.seriesName + i} />);
     }.bind(this));
 
     return (
@@ -254,8 +152,8 @@ var LineChart = React.createClass({
       if (this.props.data.hasOwnProperty(seriesName)) {
         dataSeriesArray.push(
             <DataSeries
-              scaleX={this.state.scaleX}
-              scaleY={this.state.scaleY}
+              xScale={this.state.xScale}
+              yScale={this.state.yScale}
               seriesName={seriesName}
               data={this.props.data[seriesName]}
               width={this.state.chartWidth}
@@ -276,20 +174,24 @@ var LineChart = React.createClass({
         <g transform={trans}>
           {dataSeriesArray}
           <YAxis
-            scaleY={this.state.scaleY}
+            yAxisClassName="line y axis"
+            yScale={this.state.yScale}
             margins={this.props.margins}
             yAxisTickCount={this.props.yAxisTickCount}
             width={this.state.chartWidth}
             height={this.state.chartHeight}
-            color={this.props.axesColor}
+            stroke={this.props.axesColor}
           />
           <XAxis
-            scaleX={this.state.scaleX}
+            xAxisClassName="line x axis"
+            strokeWidth="1"
+            hideOrigin={true}
+            xScale={this.state.xScale}
             data={this.props.data}
             margins={this.props.margins}
             width={this.state.chartWidth}
             height={this.state.chartHeight}
-            color={this.props.axesColor}
+            stroke={this.props.axesColor}
           />
         </g>
       </Chart>
@@ -317,19 +219,19 @@ var LineChart = React.createClass({
     var chartWidth = this.props.width - this.props.margins.left - this.props.margins.right;
     var chartHeight = this.props.height - this.props.margins.top - this.props.margins.bottom;
 
-    var scaleX = d3.scale.linear()
+    var xScale = d3.scale.linear()
       .domain([0, maxX])
       .range([0, chartWidth]);
 
-    var scaleY = d3.scale.linear()
+    var yScale = d3.scale.linear()
       .domain([0, maxY])
       .range([chartHeight, 0]);
 
     this.setState({
       maxX: maxX,
       maxY: maxY,
-      scaleX: scaleX,
-      scaleY: scaleY,
+      xScale: xScale,
+      yScale: yScale,
       chartWidth: chartWidth,
       chartHeight: chartHeight
     })
diff --git a/tests/areachart-tests.js b/tests/areachart-tests.js
index 084ed79..38d5665 100644
--- a/tests/areachart-tests.js
+++ b/tests/areachart-tests.js
@@ -17,7 +17,7 @@ describe('AreaChart', function() {
 
     // Verify that it has the same number of areas as the array's length
     var area = TestUtils.findRenderedDOMComponentWithClass(
-      areachart, 'area');
+      areachart, 'area-path');
     expect(area.props.d).to.exist;
   });
 });