diff --git a/src/grid-area.tsx b/src/grid-area.tsx
index 0f5a2db..49a4711 100644
--- a/src/grid-area.tsx
+++ b/src/grid-area.tsx
@@ -77,7 +77,8 @@ class GridArea extends PureComponent<GridAreaProps, {}> {
 
     const style = {...GridArea.defaultStyle, ...this.props.style}; 
 
-    const isVertical = (this.props.direction === Direction.VERTICAL);
+    const axisDirection = (this.props.direction === Direction.VERTICAL ? Direction.HORIZONTAL : Direction.VERTICAL);
+    const isVertical = (axisDirection === Direction.VERTICAL);
 
     const primaryAxisName = isVertical ? 'y' : 'x';
     const crossAxisName = isVertical ? 'x' : 'y';
@@ -115,7 +116,7 @@ class GridArea extends PureComponent<GridAreaProps, {}> {
             [primaryAxisName]: minPos,
             [primaryLengthAttr]: maxPos - minPos,
           };
-          
+
           return (
             <rect
               {...rectProps}
diff --git a/stories/BasicGridAreaHorizontal.js b/stories/BasicGridAreaHorizontal.js
index 0a8e9ac..7162044 100644
--- a/stories/BasicGridAreaHorizontal.js
+++ b/stories/BasicGridAreaHorizontal.js
@@ -24,7 +24,7 @@ export default class BasicChartWithGridArea extends React.Component {
         <HorizontalGridLines />
         <VerticalGridLines />
         <GridArea 
-        direction={'vertical'} 
+        direction={'horizontal'} 
         style={{fill:"rgba(0,255,0,0.4)"}}
         highlightRegion={[[4, 5.76], [8.5, 11.25]]}
         />
diff --git a/stories/BasicGridAreaVertical.js b/stories/BasicGridAreaVertical.js
index 94a4f4a..4af51c5 100644
--- a/stories/BasicGridAreaVertical.js
+++ b/stories/BasicGridAreaVertical.js
@@ -24,7 +24,7 @@ export default class BasicChartWithGridArea extends React.Component {
         <HorizontalGridLines />
         <VerticalGridLines />
         <GridArea 
-        direction={'horizontal'} 
+        direction={'vertical'} 
         style={{fill:"rgba(0,255,0,0.4)"}}
         highlightRegion={[[timestamp + MSEC_DAILY*2, timestamp + MSEC_DAILY*3]]}
         />