From 509fab1e5da5913f856fa22f71474b1c840e6512 Mon Sep 17 00:00:00 2001
From: Mark McDowell <mark.mcdowell@reactivemarkets.com>
Date: Wed, 11 Sep 2019 18:11:32 +0100
Subject: [PATCH] fix(axis): axisAt and orient now have defaults

You only need to specify axisAt and orient if you want to position other
than the bottom for x and right for y.

Closes #31
---
 packages/charts/src/axes/XAxis.tsx            | 20 +++++++------
 packages/charts/src/axes/YAxis.tsx            | 28 ++++++++++---------
 .../charts/src/coordinates/EdgeIndicator.tsx  |  4 +--
 .../src/coordinates/MouseCoordinateY.tsx      |  4 +--
 packages/charts/src/utils/PureComponent.tsx   |  4 +--
 .../src/indicators/ema/emaIndicator.tsx       | 12 ++------
 .../src/indicators/ema/index.stories.tsx      |  8 +++---
 .../src/indicators/macd/index.stories.tsx     |  8 +++---
 .../src/indicators/macd/macdIndicator.tsx     | 10 ++-----
 .../src/indicators/rsi/index.stories.tsx      |  8 +++---
 .../src/indicators/rsi/rsiIndicator.tsx       | 10 ++-----
 .../src/series/area/basicAreaSeries.tsx       | 18 ++++--------
 .../stories/src/series/area/index.stories.tsx |  8 +++---
 .../stories/src/series/bar/basicBarSeries.tsx | 10 ++-----
 .../stories/src/series/bar/index.stories.tsx  |  8 +++---
 .../series/baseline/basicBaselineSeries.tsx   | 18 ++++--------
 .../src/series/baseline/index.stories.tsx     |  8 +++---
 .../series/candlestick/basicCandlestick.tsx   | 14 +++-------
 .../src/series/candlestick/index.stories.tsx  |  8 +++---
 .../heikinAshi/basicHeikinAshiSeries.tsx      | 14 +++-------
 .../src/series/heikinAshi/index.stories.tsx   |  8 +++---
 .../src/series/kagi/basicKagiSeries.tsx       | 14 +++-------
 .../stories/src/series/kagi/index.stories.tsx |  8 +++---
 .../src/series/line/basicLineSeries.tsx       | 18 ++++--------
 .../stories/src/series/line/index.stories.tsx |  8 +++---
 .../basicPointAndFigureSeries.tsx             | 10 ++-----
 .../series/pointAndFigure/index.stories.tsx   |  8 +++---
 .../src/series/renko/basicRenkoSeries.tsx     | 14 +++-------
 .../src/series/renko/index.stories.tsx        |  8 +++---
 .../src/showcase/stockChart/index.stories.tsx |  8 +++---
 .../src/showcase/stockChart/stockChart.tsx    | 16 ++---------
 31 files changed, 131 insertions(+), 211 deletions(-)

diff --git a/packages/charts/src/axes/XAxis.tsx b/packages/charts/src/axes/XAxis.tsx
index 3d29046d1..9d9f6b6b0 100644
--- a/packages/charts/src/axes/XAxis.tsx
+++ b/packages/charts/src/axes/XAxis.tsx
@@ -4,7 +4,7 @@ import { strokeDashTypes } from "../utils";
 import Axis from "./Axis";
 
 interface XAxisProps {
-    readonly axisAt: number | "top" | "bottom" | "middle";
+    readonly axisAt?: number | "top" | "bottom" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
     readonly fill?: string;
@@ -16,7 +16,7 @@ interface XAxisProps {
     readonly innerTickSize?: number;
     readonly onContextMenu?: any; // func
     readonly onDoubleClick?: any; // func
-    readonly orient: "top" | "bottom";
+    readonly orient?: "top" | "bottom";
     readonly outerTickSize?: number;
     readonly showDomain?: boolean;
     readonly showTicks?: boolean;
@@ -42,30 +42,32 @@ interface XAxisProps {
 export class XAxis extends React.Component<XAxisProps> {
 
     public static defaultProps = {
+        axisAt: "bottom",
         className: "react-financial-charts-x-axis",
         domainClassName: "react-financial-charts-axis-domain",
         fill: "none",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fontWeight: 400,
+        getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
+        opacity: 1,
+        orient: "bottom",
+        outerTickSize: 0,
+        innerTickSize: 5,
         showTicks: true,
         showTickLabel: true,
         showDomain: true,
         stroke: "#000000",
         strokeWidth: 1,
         strokeOpacity: 1,
-        opacity: 1,
-        outerTickSize: 0,
-        innerTickSize: 5,
         ticks: 10,
         tickPadding: 6,
         tickLabelFill: "#000000",
         tickStroke: "#000000",
         tickStrokeOpacity: 1,
-        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-        fontSize: 12,
-        fontWeight: 400,
         xZoomHeight: 25,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ew-resize-cursor",
-        getMouseDelta: (startXY: [number, number], mouseXY: [number, number]) => startXY[0] - mouseXY[0],
     };
 
     public static contextTypes = {
diff --git a/packages/charts/src/axes/YAxis.tsx b/packages/charts/src/axes/YAxis.tsx
index 1a32a01c9..d13a04fdc 100644
--- a/packages/charts/src/axes/YAxis.tsx
+++ b/packages/charts/src/axes/YAxis.tsx
@@ -4,7 +4,7 @@ import { strokeDashTypes } from "../utils";
 import Axis from "./Axis";
 
 interface YAxisProps {
-    readonly axisAt: number | "left" | "right" | "middle";
+    readonly axisAt?: number | "left" | "right" | "middle";
     readonly className?: string;
     readonly domainClassName?: string;
     readonly fill?: string;
@@ -16,7 +16,7 @@ interface YAxisProps {
     readonly innerTickSize?: number;
     readonly onContextMenu?: any; // func
     readonly onDoubleClick?: any; // func
-    readonly orient: "left" | "right";
+    readonly orient?: "left" | "right";
     readonly outerTickSize?: number;
     readonly showDomain?: boolean;
     readonly showTicks?: boolean;
@@ -42,30 +42,32 @@ interface YAxisProps {
 export class YAxis extends React.Component<YAxisProps> {
 
     public static defaultProps = {
-        showTicks: true,
-        showTickLabel: true,
-        showDomain: true,
+        axisAt: "right",
         className: "react-financial-charts-y-axis",
-        ticks: 10,
-        outerTickSize: 0,
         domainClassName: "react-financial-charts-axis-domain",
         fill: "none",
+        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+        fontSize: 12,
+        fontWeight: 400,
+        getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
+        innerTickSize: 5,
+        outerTickSize: 0,
+        opacity: 1,
+        orient: "right",
+        showTicks: true,
+        showTickLabel: true,
+        showDomain: true,
         stroke: "#000000",
         strokeWidth: 1,
         strokeOpacity: 1,
-        opacity: 1,
-        innerTickSize: 5,
         tickPadding: 6,
         tickLabelFill: "#000000",
+        ticks: 10,
         tickStroke: "#000000",
         tickStrokeOpacity: 1,
-        fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-        fontSize: 12,
-        fontWeight: 400,
         yZoomWidth: 40,
         zoomEnabled: true,
         zoomCursorClassName: "react-financial-charts-ns-resize-cursor",
-        getMouseDelta: (startXY, mouseXY) => startXY[1] - mouseXY[1],
     };
 
     public static contextTypes = {
diff --git a/packages/charts/src/coordinates/EdgeIndicator.tsx b/packages/charts/src/coordinates/EdgeIndicator.tsx
index 1c2808a83..10a1d97e1 100644
--- a/packages/charts/src/coordinates/EdgeIndicator.tsx
+++ b/packages/charts/src/coordinates/EdgeIndicator.tsx
@@ -29,8 +29,8 @@ export class EdgeIndicator extends React.Component<EdgeIndicatorProps> {
     public static defaultProps = {
         className: "react-financial-charts-edgeindicator",
         type: "horizontal",
-        orient: "left",
-        edgeAt: "left",
+        orient: "right",
+        edgeAt: "right",
         textFill: "#FFFFFF",
         displayFormat: format(".2f"),
         yAxisPad: 0,
diff --git a/packages/charts/src/coordinates/MouseCoordinateY.tsx b/packages/charts/src/coordinates/MouseCoordinateY.tsx
index b4c666168..63c0c5fdf 100644
--- a/packages/charts/src/coordinates/MouseCoordinateY.tsx
+++ b/packages/charts/src/coordinates/MouseCoordinateY.tsx
@@ -28,8 +28,8 @@ export class MouseCoordinateY extends React.Component<MouseCoordinateYProps> {
         yAxisPad: 0,
         rectWidth: 50,
         rectHeight: 20,
-        orient: "left",
-        at: "left",
+        orient: "right",
+        at: "right",
         dx: 0,
         arrowWidth: 10,
         fill: "#4a4a4a",
diff --git a/packages/charts/src/utils/PureComponent.tsx b/packages/charts/src/utils/PureComponent.tsx
index 65546f1de..361063e79 100644
--- a/packages/charts/src/utils/PureComponent.tsx
+++ b/packages/charts/src/utils/PureComponent.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import shallowEqual from "./shallowEqual";
 
-export class PureComponent<T> extends React.Component<T> {
-    public shouldComponentUpdate(nextProps, nextState, nextContext) {
+export class PureComponent<T, S = {}, SS = any> extends React.Component<T, S, SS> {
+    public shouldComponentUpdate(nextProps: T, nextState: S, nextContext: SS) {
         return !shallowEqual(this.props, nextProps)
             || !shallowEqual(this.state, nextState)
             || !shallowEqual(this.context, nextContext);
diff --git a/packages/stories/src/indicators/ema/emaIndicator.tsx b/packages/stories/src/indicators/ema/emaIndicator.tsx
index eb2017623..6a1393c51 100644
--- a/packages/stories/src/indicators/ema/emaIndicator.tsx
+++ b/packages/stories/src/indicators/ema/emaIndicator.tsx
@@ -17,7 +17,7 @@ interface ChartProps {
 
 class EMAIndicator extends React.Component<ChartProps> {
 
-    private readonly margin = { left: 0, right: 40, top: 0, bottom: 24 };
+    private readonly margin = { left: 0, right: 40, top: 8, bottom: 24 };
     private readonly xScaleProvider = discontinuousTimeScaleProviderBuilder()
         .inputDateAccessor((d: IOHLCData) => d.date);
 
@@ -74,14 +74,8 @@ class EMAIndicator extends React.Component<ChartProps> {
                 <Chart
                     id={1}
                     yExtents={[0, 100]}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
 
                     <LineSeries yAccessor={ema26.accessor()} stroke={ema26.stroke()} />
                     <LineSeries yAccessor={ema12.accessor()} stroke={ema12.stroke()} />
diff --git a/packages/stories/src/indicators/ema/index.stories.tsx b/packages/stories/src/indicators/ema/index.stories.tsx
index 7c11ddc85..a7bec97ff 100644
--- a/packages/stories/src/indicators/ema/index.stories.tsx
+++ b/packages/stories/src/indicators/ema/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import EMAIndicator from "./emaIndicator";
 
 storiesOf("Indicators", module)
-    .add("EMA", () => {
-        return (
-            <EMAIndicator />
-        );
+    .add("EMA", () => <EMAIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/macd/index.stories.tsx b/packages/stories/src/indicators/macd/index.stories.tsx
index 7ac78bb42..cd7d11edd 100644
--- a/packages/stories/src/indicators/macd/index.stories.tsx
+++ b/packages/stories/src/indicators/macd/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import MACDIndicator from "./macdIndicator";
 
 storiesOf("Indicators", module)
-    .add("MACD", () => {
-        return (
-            <MACDIndicator />
-        );
+    .add("MACD", () => <MACDIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/macd/macdIndicator.tsx b/packages/stories/src/indicators/macd/macdIndicator.tsx
index f979ca972..9c57e83c8 100644
--- a/packages/stories/src/indicators/macd/macdIndicator.tsx
+++ b/packages/stories/src/indicators/macd/macdIndicator.tsx
@@ -79,14 +79,8 @@ class MACDIndicator extends React.Component<MACDIndicatorProps> {
                 <Chart
                     id={1}
                     yExtents={calculator.accessor()}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={2} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={2} />
 
                     <MACDSeries
                         yAccessor={this.yAccessor}
diff --git a/packages/stories/src/indicators/rsi/index.stories.tsx b/packages/stories/src/indicators/rsi/index.stories.tsx
index 69253186a..7189674f3 100644
--- a/packages/stories/src/indicators/rsi/index.stories.tsx
+++ b/packages/stories/src/indicators/rsi/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import RSIIndicator from "./rsiIndicator";
 
 storiesOf("Indicators", module)
-    .add("RSI", () => {
-        return (
-            <RSIIndicator />
-        );
+    .add("RSI", () => <RSIIndicator />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/indicators/rsi/rsiIndicator.tsx b/packages/stories/src/indicators/rsi/rsiIndicator.tsx
index 7ece331b3..9fa057650 100644
--- a/packages/stories/src/indicators/rsi/rsiIndicator.tsx
+++ b/packages/stories/src/indicators/rsi/rsiIndicator.tsx
@@ -66,14 +66,8 @@ class RSIIndicator extends React.Component<RSIIndicatorProps> {
                 <Chart
                     id={1}
                     yExtents={[0, 100]}>
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        tickValues={[30, 50, 70]} />
+                    <XAxis ticks={6} />
+                    <YAxis tickValues={[30, 50, 70]} />
 
                     <RSISeries yAccessor={(d: any) => d.rsi} />
 
diff --git a/packages/stories/src/series/area/basicAreaSeries.tsx b/packages/stories/src/series/area/basicAreaSeries.tsx
index f96db3176..86640dfbb 100644
--- a/packages/stories/src/series/area/basicAreaSeries.tsx
+++ b/packages/stories/src/series/area/basicAreaSeries.tsx
@@ -55,26 +55,20 @@ class BasicAreaSeries extends React.Component<BasicAreaSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
-                    <AreaSeries yAccessor={this.areaSeriesAccessor} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    yExtents={this.yExtents}>
+                    <AreaSeries yAccessor={this.yAccessor} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly areaSeriesAccessor = (data: IOHLCData) => {
+    private readonly yAccessor = (data: IOHLCData) => {
         return data.close;
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/area/index.stories.tsx b/packages/stories/src/series/area/index.stories.tsx
index e3b1c3130..fbcbb1480 100644
--- a/packages/stories/src/series/area/index.stories.tsx
+++ b/packages/stories/src/series/area/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicAreaSeries from "./basicAreaSeries";
 
 storiesOf("Series", module)
-    .add("Area", () => {
-        return (
-            <BasicAreaSeries />
-        );
+    .add("Area", () => <BasicAreaSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/bar/basicBarSeries.tsx b/packages/stories/src/series/bar/basicBarSeries.tsx
index 5b73f8e47..b9a015a98 100644
--- a/packages/stories/src/series/bar/basicBarSeries.tsx
+++ b/packages/stories/src/series/bar/basicBarSeries.tsx
@@ -57,14 +57,8 @@ class BasicBarSeries extends React.Component<BasicBarSeriesProps> {
                     id={1}
                     yExtents={this.yExtents}>
                     <BarSeries yAccessor={this.yAccessor} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
diff --git a/packages/stories/src/series/bar/index.stories.tsx b/packages/stories/src/series/bar/index.stories.tsx
index 5cb071c00..811baa780 100644
--- a/packages/stories/src/series/bar/index.stories.tsx
+++ b/packages/stories/src/series/bar/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicBarSeries from "./basicBarSeries";
 
 storiesOf("Series", module)
-    .add("Bar", () => {
-        return (
-            <BasicBarSeries />
-        );
+    .add("Bar", () => <BasicBarSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/baseline/basicBaselineSeries.tsx b/packages/stories/src/series/baseline/basicBaselineSeries.tsx
index 9c9b7a713..1b742da6f 100644
--- a/packages/stories/src/series/baseline/basicBaselineSeries.tsx
+++ b/packages/stories/src/series/baseline/basicBaselineSeries.tsx
@@ -56,28 +56,22 @@ class BasicBaselineSeries extends React.Component<BasicBaselineSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <AlternatingFillAreaSeries
-                        yAccessor={this.areaSeriesAccessor}
+                        yAccessor={this.yAccessor}
                         baseAt={base} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly areaSeriesAccessor = (data: IOHLCData) => {
+    private readonly yAccessor = (data: IOHLCData) => {
         return data.close;
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/baseline/index.stories.tsx b/packages/stories/src/series/baseline/index.stories.tsx
index 5121f00f0..4619f2f27 100644
--- a/packages/stories/src/series/baseline/index.stories.tsx
+++ b/packages/stories/src/series/baseline/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicBaselineSeries from "./basicBaselineSeries";
 
 storiesOf("Series", module)
-    .add("Baseline", () => {
-        return (
-            <BasicBaselineSeries />
-        );
+    .add("Baseline", () => <BasicBaselineSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/candlestick/basicCandlestick.tsx b/packages/stories/src/series/candlestick/basicCandlestick.tsx
index a1e9ece14..3197a042d 100644
--- a/packages/stories/src/series/candlestick/basicCandlestick.tsx
+++ b/packages/stories/src/series/candlestick/basicCandlestick.tsx
@@ -55,22 +55,16 @@ class BasicCandlestick extends React.Component<BasicCandlestickProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <CandlestickSeries />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/candlestick/index.stories.tsx b/packages/stories/src/series/candlestick/index.stories.tsx
index d9676669e..1d0cc1544 100644
--- a/packages/stories/src/series/candlestick/index.stories.tsx
+++ b/packages/stories/src/series/candlestick/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicCandlestickSeries from "./basicCandlestick";
 
 storiesOf("Series", module)
-    .add("Candles", () => {
-        return (
-            <BasicCandlestickSeries />
-        );
+    .add("Candles", () => <BasicCandlestickSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx b/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
index 2056d07fb..a1167e025 100644
--- a/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
+++ b/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
@@ -60,22 +60,16 @@ class BasicHeikinAshiSeries extends React.Component<BasicHeikinAshiSeriesProps>
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <CandlestickSeries />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/heikinAshi/index.stories.tsx b/packages/stories/src/series/heikinAshi/index.stories.tsx
index ce79c68d3..b98260c5b 100644
--- a/packages/stories/src/series/heikinAshi/index.stories.tsx
+++ b/packages/stories/src/series/heikinAshi/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicHeikinAshiSeries from "./basicHeikinAshiSeries";
 
 storiesOf("Series", module)
-    .add("Heikin Ashi", () => {
-        return (
-            <BasicHeikinAshiSeries />
-        );
+    .add("Heikin Ashi", () => <BasicHeikinAshiSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/kagi/basicKagiSeries.tsx b/packages/stories/src/series/kagi/basicKagiSeries.tsx
index 0f6cbbfb6..ec8d0d5b3 100644
--- a/packages/stories/src/series/kagi/basicKagiSeries.tsx
+++ b/packages/stories/src/series/kagi/basicKagiSeries.tsx
@@ -60,22 +60,16 @@ class BasicKagiSeries extends React.Component<BasicKagiSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <KagiSeries />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/kagi/index.stories.tsx b/packages/stories/src/series/kagi/index.stories.tsx
index 9bcfa5a8f..d6fc8d2ff 100644
--- a/packages/stories/src/series/kagi/index.stories.tsx
+++ b/packages/stories/src/series/kagi/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicKagiSeries from "./basicKagiSeries";
 
 storiesOf("Series", module)
-    .add("Kagi", () => {
-        return (
-            <BasicKagiSeries />
-        );
+    .add("Kagi", () => <BasicKagiSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/line/basicLineSeries.tsx b/packages/stories/src/series/line/basicLineSeries.tsx
index 96c804195..e5bde69e8 100644
--- a/packages/stories/src/series/line/basicLineSeries.tsx
+++ b/packages/stories/src/series/line/basicLineSeries.tsx
@@ -55,26 +55,20 @@ class BasicLineSeries extends React.Component<BasicLineSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
-                    <LineSeries yAccessor={this.areaSeriesAccessor} strokeWidth={3} />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    yExtents={this.yExtents}>
+                    <LineSeries yAccessor={this.yAccessor} strokeWidth={3} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly areaSeriesAccessor = (data: IOHLCData) => {
+    private readonly yAccessor = (data: IOHLCData) => {
         return data.close;
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/line/index.stories.tsx b/packages/stories/src/series/line/index.stories.tsx
index 5825b214d..350b69ecf 100644
--- a/packages/stories/src/series/line/index.stories.tsx
+++ b/packages/stories/src/series/line/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicLineSeries from "./basicLineSeries";
 
 storiesOf("Series", module)
-    .add("Line", () => {
-        return (
-            <BasicLineSeries />
-        );
+    .add("Line", () => <BasicLineSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx b/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
index 8f5563752..1de1c90dd 100644
--- a/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
+++ b/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
@@ -62,14 +62,8 @@ class BasicPointAndFigureSeries extends React.Component<BasicPointAndFigureSerie
                     id={1}
                     yExtents={this.yExtents}>
                     <PointAndFigureSeries />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
diff --git a/packages/stories/src/series/pointAndFigure/index.stories.tsx b/packages/stories/src/series/pointAndFigure/index.stories.tsx
index 9f5eee7cb..a52794341 100644
--- a/packages/stories/src/series/pointAndFigure/index.stories.tsx
+++ b/packages/stories/src/series/pointAndFigure/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicPointAndFigureSeries from "./basicPointAndFigureSeries";
 
 storiesOf("Series", module)
-    .add("Point & Figure", () => {
-        return (
-            <BasicPointAndFigureSeries />
-        );
+    .add("Point & Figure", () => <BasicPointAndFigureSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/series/renko/basicRenkoSeries.tsx b/packages/stories/src/series/renko/basicRenkoSeries.tsx
index 3af815e63..3a2b6ba7f 100644
--- a/packages/stories/src/series/renko/basicRenkoSeries.tsx
+++ b/packages/stories/src/series/renko/basicRenkoSeries.tsx
@@ -60,22 +60,16 @@ class BasicRenkoSeries extends React.Component<BasicRenkoSeriesProps> {
                 xExtents={xExtents}>
                 <Chart
                     id={1}
-                    yExtents={this.candleChartExtents}>
+                    yExtents={this.yExtents}>
                     <RenkoSeries />
-                    <XAxis
-                        axisAt="bottom"
-                        orient="bottom"
-                        ticks={6} />
-                    <YAxis
-                        axisAt="right"
-                        orient="right"
-                        ticks={5} />
+                    <XAxis ticks={6} />
+                    <YAxis ticks={5} />
                 </Chart>
             </ChartCanvas>
         );
     }
 
-    private readonly candleChartExtents = (data: IOHLCData) => {
+    private readonly yExtents = (data: IOHLCData) => {
         return [data.high, data.low];
     }
 }
diff --git a/packages/stories/src/series/renko/index.stories.tsx b/packages/stories/src/series/renko/index.stories.tsx
index 4e1f8e85a..33fbd8e10 100644
--- a/packages/stories/src/series/renko/index.stories.tsx
+++ b/packages/stories/src/series/renko/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import BasicRenkoSeries from "./basicRenkoSeries";
 
 storiesOf("Series", module)
-    .add("Renko", () => {
-        return (
-            <BasicRenkoSeries />
-        );
+    .add("Renko", () => <BasicRenkoSeries />, {
+        options: {
+            showPanel: true,
+        },
     });
diff --git a/packages/stories/src/showcase/stockChart/index.stories.tsx b/packages/stories/src/showcase/stockChart/index.stories.tsx
index baa450a78..4624dcace 100644
--- a/packages/stories/src/showcase/stockChart/index.stories.tsx
+++ b/packages/stories/src/showcase/stockChart/index.stories.tsx
@@ -3,8 +3,8 @@ import * as React from "react";
 import StockChart from "./stockChart";
 
 storiesOf("Showcase|Charts", module)
-    .add("Stockchart", () => {
-        return (
-            <StockChart />
-        );
+    .add("Stockchart", () => <StockChart />, {
+        options: {
+            showPanel: false,
+        },
     });
diff --git a/packages/stories/src/showcase/stockChart/stockChart.tsx b/packages/stories/src/showcase/stockChart/stockChart.tsx
index c9bdfa447..1fc1b4c0a 100644
--- a/packages/stories/src/showcase/stockChart/stockChart.tsx
+++ b/packages/stories/src/showcase/stockChart/stockChart.tsx
@@ -69,14 +69,10 @@ class StockChart extends React.Component<StockChartProps> {
                     yExtents={this.candleChartExtents}>
                     <XAxis
                         innerTickSize={-1 * gridHeight}
-                        axisAt="bottom"
-                        orient="bottom"
                         tickStroke="#e0e3eb"
                         ticks={6} />
                     <YAxis
                         innerTickSize={-1 * gridWidth}
-                        axisAt="right"
-                        orient="right"
                         tickFormat={this.pricesDisplayFormat}
                         tickStroke="#e0e3eb"
                         ticks={5} />
@@ -95,18 +91,10 @@ class StockChart extends React.Component<StockChartProps> {
                     id={3}
                     yExtents={this.candleChartExtents}>
                     <CandlestickSeries />
-                    <MouseCoordinateX
-                        at="bottom"
-                        orient="bottom"
-                        displayFormat={this.timeDisplayFormat} />
-                    <MouseCoordinateY
-                        at="right"
-                        orient="right"
-                        displayFormat={this.pricesDisplayFormat} />
+                    <MouseCoordinateX displayFormat={this.timeDisplayFormat} />
+                    <MouseCoordinateY displayFormat={this.pricesDisplayFormat} />
                     <EdgeIndicator
                         itemType="last"
-                        orient="right"
-                        edgeAt="right"
                         fill={this.openCloseColor}
                         lineStroke={this.openCloseColor}
                         displayFormat={this.pricesDisplayFormat}