diff --git a/web/src/components/areagraph.js b/web/src/components/areagraph.js
index fe9f4a4317..c1cb297a0b 100644
--- a/web/src/components/areagraph.js
+++ b/web/src/components/areagraph.js
@@ -17,6 +17,15 @@ function AreaGraph(selector, modeColor, modeOrder) {
     var that = this;
 
     this.rootElement = d3.select(selector);
+
+    // Create axis
+    this.xAxisElement = this.rootElement.append('g')
+        .attr('class', 'x axis')
+        .style('pointer-events', 'none');
+    this.yAxisElement = this.rootElement.append('g')
+        .attr('class', 'y axis')
+        .style('pointer-events', 'none');
+
     this.graphElement = this.rootElement.append('g');
     this.interactionRect = this.graphElement.append('rect')
         .style('cursor', 'pointer')
@@ -26,6 +35,7 @@ function AreaGraph(selector, modeColor, modeOrder) {
         .style('display', 'none')
         .style('pointer-events', 'none')
         .style('shape-rendering', 'crispEdges')
+
     this.markerElement = this.rootElement.append('circle')
         .style('pointer-events', 'none')
         .style('display', 'none')
@@ -33,14 +43,6 @@ function AreaGraph(selector, modeColor, modeOrder) {
         .style('stroke', 'black')
         .style('stroke-width', 1.5);
 
-    // Create axis
-    this.xAxisElement = this.rootElement.append('g')
-        .attr('class', 'x axis')
-        .style('pointer-events', 'none');
-    this.yAxisElement = this.rootElement.append('g')
-        .attr('class', 'y axis')
-        .style('pointer-events', 'none');
-
     // Create scales
     this.x = d3.scaleTime();
     this.y = d3.scaleLinear();
@@ -308,15 +310,14 @@ AreaGraph.prototype.render = function() {
         .ticks(5)
         .tickFormat(function(d) { return moment(d).format('LT'); });
     this.xAxisElement
-        // Need to remove 1px in order to see the 1px line
-        .attr('transform', `translate(0 ${height - X_AXIS_HEIGHT})`)
+        .attr('transform', `translate(-1 ${height - X_AXIS_HEIGHT - 1})`)
         .call(xAxis);
 
     // y axis
     var yAxis = d3.axisRight(y)
         .ticks(5);
     this.yAxisElement
-        .attr('transform', `translate(${width - Y_AXIS_WIDTH} 0)`)
+        .attr('transform', `translate(${width - Y_AXIS_WIDTH - 1} -1)`)
         .call(yAxis);
 
     return this;
diff --git a/web/src/components/linegraph.js b/web/src/components/linegraph.js
index d977afaa52..fabbae5e7e 100644
--- a/web/src/components/linegraph.js
+++ b/web/src/components/linegraph.js
@@ -14,6 +14,15 @@ var moment = require('moment');
 
 function LineGraph(selector, xAccessor, yAccessor, definedAccessor) {
     this.rootElement = d3.select(selector);
+
+    // Create axis
+    this.xAxisElement = this.rootElement.append('g')
+        .attr('class', 'x axis')
+        .style('pointer-events', 'none');
+    this.yAxisElement = this.rootElement.append('g')
+        .attr('class', 'y axis')
+        .style('pointer-events', 'none');
+
     this.graphElement = this.rootElement.append('g');
     this.interactionRect = this.graphElement.append('rect')
         .style('cursor', 'pointer')
@@ -39,14 +48,6 @@ function LineGraph(selector, xAccessor, yAccessor, definedAccessor) {
     this.definedAccessor = definedAccessor;
     this._gradient = true;
 
-    // Create axis
-    this.xAxisElement = this.rootElement.append('g')
-        .attr('class', 'x axis')
-        .style('pointer-events', 'none');
-    this.yAxisElement = this.rootElement.append('g')
-        .attr('class', 'y axis')
-        .style('pointer-events', 'none');
-
     // Create scales
     var x, y;
     this.x = x = d3.scaleTime();
@@ -250,15 +251,14 @@ LineGraph.prototype.render = function () {
         .ticks(5)
         .tickFormat(function(d) { return moment(d).format('LT'); });
     this.xAxisElement
-        // Need to remove 1px in order to see the 1px line
-        .attr('transform', `translate(0 ${height - X_AXIS_HEIGHT})`) // Need to use transform attribute (and not css property) due to lack of IE support: https://aheadcreative.co.uk/articles/svg-transitions-not-working-ie11/
+        .attr('transform', `translate(-1 ${height - X_AXIS_HEIGHT - 1})`) // Need to use transform attribute (and not css property) due to lack of IE support: https://aheadcreative.co.uk/articles/svg-transitions-not-working-ie11/
         .call(xAxis);
 
     // y axis
     var yAxis = d3.axisRight(y)
         .ticks(5);
     this.yAxisElement
-        .attr('transform', `translate(${width - Y_AXIS_WIDTH} 0)`)
+        .attr('transform', `translate(${width - Y_AXIS_WIDTH - 1} -1)`)
         .call(yAxis);
 
     return this;
diff --git a/web/src/styles.css b/web/src/styles.css
index 39e4457ea6..370163a0cb 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -380,9 +380,8 @@ body {
     color: black;
 }
 .left-panel .axis .tick line {
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-    stroke: gray;
+    shape-rendering: auto;
+    stroke: lightgray;
     stroke-width: 1;
 }
 .left-panel .axis .tick text {
@@ -391,9 +390,8 @@ body {
 }
 .left-panel .axis path.domain {
     fill: none;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-    stroke: transparent;
+    shape-rendering: auto;
+    stroke: lightgray;
 }
 .left-panel-toolbar,
 .left-panel-zone-details-toolbar {