diff --git a/packages/core/src/Chart.tsx b/packages/core/src/Chart.tsx
index 06657c2d6..103188787 100644
--- a/packages/core/src/Chart.tsx
+++ b/packages/core/src/Chart.tsx
@@ -1,7 +1,6 @@
 import { scaleLinear, ScaleContinuousNumeric } from "d3-scale";
 import * as PropTypes from "prop-types";
 import * as React from "react";
-
 import { PureComponent } from "./utils";
 
 export interface ChartProps {
@@ -87,21 +86,27 @@ export class Chart extends PureComponent<ChartProps> {
 
         switch (type) {
             case "contextmenu": {
-                if (onContextMenu !== undefined) {
-                    const { currentCharts } = moreProps;
-                    if (currentCharts.indexOf(id) > -1) {
-                        onContextMenu(e, moreProps);
-                    }
+                if (onContextMenu === undefined) {
+                    return;
+                }
+
+                const { currentCharts } = moreProps;
+                if (currentCharts.indexOf(id) > -1) {
+                    onContextMenu(e, moreProps);
                 }
+
                 break;
             }
             case "dblclick": {
-                if (onDoubleClick !== undefined) {
-                    const { currentCharts } = moreProps;
-                    if (currentCharts.indexOf(id) > -1) {
-                        onDoubleClick(e, moreProps);
-                    }
+                if (onDoubleClick === undefined) {
+                    return;
                 }
+
+                const { currentCharts } = moreProps;
+                if (currentCharts.indexOf(id) > -1) {
+                    onDoubleClick(e, moreProps);
+                }
+
                 break;
             }
         }
diff --git a/packages/core/src/ChartCanvas.tsx b/packages/core/src/ChartCanvas.tsx
index d1a392568..6ffb7092b 100644
--- a/packages/core/src/ChartCanvas.tsx
+++ b/packages/core/src/ChartCanvas.tsx
@@ -67,18 +67,18 @@ function getCursorStyle() {
     return <style type="text/css">{tooltipStyle}</style>;
 }
 
-function getDimensions(props: ChartCanvasProps) {
+function getDimensions<TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) {
     return {
         height: props.height - props.margin.top - props.margin.bottom,
         width: props.width - props.margin.left - props.margin.right,
     };
 }
 
-function getXScaleDirection(flipXScale: any) {
+function getXScaleDirection(flipXScale?: boolean) {
     return flipXScale ? -1 : 1;
 }
 
-function calculateFullData(props: ChartCanvasProps) {
+function calculateFullData<TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) {
     const { data: fullData, plotFull, xScale, clamp, pointsPerPxThreshold, flipXScale } = props;
     const { xAccessor, displayXAccessor, minPointsPerPxThreshold } = props;
 
@@ -102,7 +102,7 @@ function calculateFullData(props: ChartCanvasProps) {
     };
 }
 
-const resetChart = (props: ChartCanvasProps) => {
+const resetChart = <TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) => {
     const state = calculateState(props);
 
     const { xAccessor, displayXAccessor, fullData, plotData: initialPlotData, xScale } = state;
@@ -197,7 +197,7 @@ function updateChart(
     };
 }
 
-function calculateState(props: ChartCanvasProps) {
+function calculateState<TXAxis extends number | Date>(props: ChartCanvasProps<TXAxis>) {
     const { xAccessor: inputXAccesor, xExtents: xExtentsProp, data, padding, flipXScale } = props;
 
     const direction = getXScaleDirection(flipXScale);
@@ -207,7 +207,9 @@ function calculateState(props: ChartCanvasProps) {
     const extent =
         typeof xExtentsProp === "function"
             ? xExtentsProp(data)
-            : d3Extent(xExtentsProp.map((d: any) => functor(d)).map((each: any) => each(data, inputXAccesor)));
+            : (d3Extent<number | Date>(
+                  xExtentsProp.map((d: any) => functor(d)).map((each: any) => each(data, inputXAccesor)),
+              ) as [TXAxis, TXAxis]);
 
     const { xAccessor, displayXAccessor, xScale, fullData, filterData } = calculateFullData(props);
 
@@ -262,7 +264,7 @@ function isInteractionEnabled(xScale: any, xAccessor: any, data: any) {
     return interaction;
 }
 
-export interface ChartCanvasProps {
+export interface ChartCanvasProps<TXAxis extends number | Date> {
     readonly clamp?:
         | boolean
         | ("left" | "right" | "both")
@@ -274,7 +276,7 @@ export interface ChartCanvasProps {
     readonly disableInteraction?: boolean;
     readonly disablePan?: boolean;
     readonly disableZoom?: boolean;
-    readonly displayXAccessor?: (data: any) => number | Date;
+    readonly displayXAccessor?: (data: any) => TXAxis;
     readonly flipXScale?: boolean;
     readonly height: number;
     readonly margin: {
@@ -289,11 +291,11 @@ export interface ChartCanvasProps {
     /**
      * Called when panning left past the first data point.
      */
-    readonly onLoadAfter?: (start: number | Date, end: number | Date) => void;
+    readonly onLoadAfter?: (start: TXAxis, end: TXAxis) => void;
     /**
      * Called when panning right past the last data point.
      */
-    readonly onLoadBefore?: (start: number | Date, end: number | Date) => void;
+    readonly onLoadBefore?: (start: TXAxis, end: TXAxis) => void;
     /**
      * Click event handler.
      */
@@ -317,24 +319,27 @@ export interface ChartCanvasProps {
     readonly seriesName: string;
     readonly useCrossHairStyleCursor?: boolean;
     readonly width: number;
-    readonly xAccessor: (data: any) => number | Date;
-    readonly xExtents?: any[] | any; // func
+    readonly xAccessor: (data: any) => TXAxis;
+    readonly xExtents: ((data: any[]) => [TXAxis, TXAxis]) | (((datum: any) => TXAxis) | TXAxis)[];
     readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
     readonly zIndex?: number;
-    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => number | Date;
+    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => TXAxis;
     readonly zoomMultiplier?: number;
 }
 
-interface ChartCanvasState {
-    xAccessor?: (data: any) => number | Date;
+interface ChartCanvasState<TXAxis extends number | Date> {
+    xAccessor?: (data: any) => TXAxis;
     displayXAccessor?: any;
     filterData?: any;
     chartConfig?: any;
-    plotData?: any;
+    plotData: any[];
     xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
 }
 
-export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasState> {
+export class ChartCanvas<TXAxis extends number | Date> extends React.Component<
+    ChartCanvasProps<TXAxis>,
+    ChartCanvasState<TXAxis>
+> {
     public static defaultProps = {
         clamp: false,
         className: "react-financial-charts",
@@ -351,7 +356,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
         padding: 0,
         pointsPerPxThreshold: 2,
         useCrossHairStyleCursor: true,
-        xAccessor: identity as (data: any) => number,
+        xAccessor: identity as (data: any) => any,
         xExtents: [min, max] as any[],
         zIndex: 1,
         zoomAnchor: mouseBasedZoomAnchor,
@@ -420,7 +425,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
     // tslint:disable-next-line: variable-name
     private hackyWayToStopPanBeyondBounds__domain?: any[] | null;
 
-    public constructor(props: ChartCanvasProps) {
+    public constructor(props: ChartCanvasProps<TXAxis>) {
         super(props);
 
         const { fullData, ...state } = resetChart(props);
@@ -1125,7 +1130,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
         };
     }
 
-    public UNSAFE_componentWillReceiveProps(nextProps: ChartCanvasProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ChartCanvasProps<TXAxis>) {
         const reset = shouldResetChart(this.props, nextProps);
 
         const interaction = isInteractionEnabled(this.state.xScale, this.state.xAccessor, this.state.plotData);
diff --git a/packages/core/src/EventCapture.tsx b/packages/core/src/EventCapture.tsx
index 0945030bc..410fe8b1f 100644
--- a/packages/core/src/EventCapture.tsx
+++ b/packages/core/src/EventCapture.tsx
@@ -42,24 +42,24 @@ interface EventCaptureProps {
     readonly onMouseLeave?: (event: React.MouseEvent) => void;
     readonly onPinchZoom?: (
         initialPinch: {
-            xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-            touch1Pos: [number, number];
-            touch2Pos: [number, number];
-            range: number[];
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
+            readonly range: number[];
         },
         currentPinch: {
-            xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-            touch1Pos: [number, number];
-            touch2Pos: [number, number];
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
         },
         e: React.TouchEvent,
     ) => void;
     readonly onPinchZoomEnd?: (
         initialPinch: {
-            xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
-            touch1Pos: [number, number];
-            touch2Pos: [number, number];
-            range: number[];
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
+            readonly range: number[];
         },
         e: React.TouchEvent,
     ) => void;
@@ -199,7 +199,7 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
     };
 
     public handleWheel = (e: React.WheelEvent) => {
-        const { zoom, onZoom } = this.props;
+        const { onPan, zoom, onZoom } = this.props;
         const { panInProgress } = this.state;
 
         const yZoom = Math.abs(e.deltaY) > Math.abs(e.deltaX) && Math.abs(e.deltaY) > 0;
@@ -230,8 +230,8 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
                 this.dy += e.deltaY;
                 const dxdy = { dx: this.dx, dy: this.dy };
 
-                if (this.props.onPan !== undefined) {
-                    this.props.onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
+                if (onPan !== undefined) {
+                    onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
                 }
             } else {
                 const { xScale, chartConfig } = this.props;
@@ -623,7 +623,7 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
 
         const { chartsToPan, ...initialPinch } = pinchZoomStart;
 
-        if (zoomEnabled && onPinchZoom) {
+        if (zoomEnabled && onPinchZoom !== undefined) {
             onPinchZoom(
                 initialPinch,
                 {
diff --git a/packages/scales/src/discontinuousTimeScaleProvider.ts b/packages/scales/src/discontinuousTimeScaleProvider.ts
index 9be999315..d376dd24f 100644
--- a/packages/scales/src/discontinuousTimeScaleProvider.ts
+++ b/packages/scales/src/discontinuousTimeScaleProvider.ts
@@ -1,4 +1,4 @@
-import { identity, slidingWindow, zipper } from "@react-financial-charts/core";
+import { slidingWindow, zipper } from "@react-financial-charts/core";
 import { timeFormat, timeFormatDefaultLocale } from "d3-time-format";
 import financeDiscontinuousScale from "./financeDiscontinuousScale";
 import { defaultFormatters, levelDefinition, IFormatters } from "./levels";
@@ -116,7 +116,7 @@ const discontinuousIndexCalculatorLocalTime = discontinuousIndexCalculator.accum
     },
 );
 
-function doStuff(realDateAccessor: any, inputDateAccessor: any, initialIndex: number, formatters: IFormatters) {
+function createIndex(realDateAccessor: any, inputDateAccessor: any, initialIndex: number, formatters: IFormatters) {
     return function (data: any[]) {
         const dateAccessor = realDateAccessor(inputDateAccessor);
 
@@ -136,9 +136,31 @@ function doStuff(realDateAccessor: any, inputDateAccessor: any, initialIndex: nu
     };
 }
 
+export interface DiscontinuousTimeScaleProviderBuilder {
+    (data: any[]): {
+        data: any[];
+        xScale: any;
+        xAccessor: (data: any) => number;
+        displayXAccessor: (data: any) => number;
+    };
+    initialIndex(): any;
+    initialIndex(x: any): DiscontinuousTimeScaleProviderBuilder;
+    inputDateAccessor(): any;
+    inputDateAccessor(accessor: (data: any) => Date): DiscontinuousTimeScaleProviderBuilder;
+    indexAccessor(): any;
+    indexAccessor(x: any): DiscontinuousTimeScaleProviderBuilder;
+    indexMutator(): any;
+    indexMutator(x: any): DiscontinuousTimeScaleProviderBuilder;
+    withIndex(): any;
+    withIndex(x: any): DiscontinuousTimeScaleProviderBuilder;
+    utc(): DiscontinuousTimeScaleProviderBuilder;
+    setLocale(locale?: any, formatters?: IFormatters): DiscontinuousTimeScaleProviderBuilder;
+    indexCalculator(): any;
+}
+
 export function discontinuousTimeScaleProviderBuilder() {
     let initialIndex = 0;
-    let realDateAccessor = identity as (x: any) => any;
+    let realDateAccessor = (d: any) => d;
     let inputDateAccessor = (d: any) => d.date;
     let indexAccessor = (d: any) => d.idx;
     let indexMutator = (d: any, idx: any) => ({ ...d, idx });
@@ -150,7 +172,7 @@ export function discontinuousTimeScaleProviderBuilder() {
         let index = withIndex;
 
         if (index === undefined) {
-            const response = doStuff(realDateAccessor, inputDateAccessor, initialIndex, currentFormatters)(data);
+            const response = createIndex(realDateAccessor, inputDateAccessor, initialIndex, currentFormatters)(data);
 
             index = response.index;
         }
@@ -228,10 +250,10 @@ export function discontinuousTimeScaleProviderBuilder() {
     };
 
     discontinuousTimeScaleProvider.indexCalculator = function () {
-        return doStuff(realDateAccessor, inputDateAccessor, initialIndex, currentFormatters);
+        return createIndex(realDateAccessor, inputDateAccessor, initialIndex, currentFormatters);
     };
 
-    return discontinuousTimeScaleProvider;
+    return discontinuousTimeScaleProvider as DiscontinuousTimeScaleProviderBuilder;
 }
 
 export default discontinuousTimeScaleProviderBuilder();
diff --git a/packages/scales/src/financeDiscontinuousScale.ts b/packages/scales/src/financeDiscontinuousScale.ts
index 5fbe16dc0..d963318cc 100644
--- a/packages/scales/src/financeDiscontinuousScale.ts
+++ b/packages/scales/src/financeDiscontinuousScale.ts
@@ -1,4 +1,4 @@
-import { head, isDefined, last } from "@react-financial-charts/core";
+import { head, last } from "@react-financial-charts/core";
 import { ascending } from "d3-array";
 import { scaleLinear, InterpolatorFactory } from "d3-scale";
 import { levelDefinition } from "./levels";
@@ -126,7 +126,7 @@ export default function financeDiscontinuousScale(index: any[], backingLinearSca
     scale.value = (x: any) => {
         const d = Math.abs(head(index).index);
         const row = index[Math.floor(x + d)];
-        if (isDefined(row)) {
+        if (row !== undefined) {
             const { date } = row;
             return date;
         }
diff --git a/packages/scales/src/index.ts b/packages/scales/src/index.ts
index 6a8422ab1..1d5a152ac 100644
--- a/packages/scales/src/index.ts
+++ b/packages/scales/src/index.ts
@@ -6,6 +6,13 @@ export {
 export { default as financeDiscontinuousScale } from "./financeDiscontinuousScale";
 export * from "./timeFormat";
 
-export const defaultScaleProvider = (xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>) => {
-    return (data: any[], xAccessor: any) => ({ data, xScale, xAccessor, displayXAccessor: xAccessor });
+export const defaultScaleProvider = <TData, TXAxis extends number | Date>(
+    xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+) => {
+    return (data: TData[], xAccessor: (data: TData) => TXAxis) => ({
+        data,
+        xScale,
+        xAccessor,
+        displayXAccessor: xAccessor,
+    });
 };
diff --git a/packages/stories/src/features/StockChart.tsx b/packages/stories/src/features/StockChart.tsx
index 29b738c04..75853c47f 100644
--- a/packages/stories/src/features/StockChart.tsx
+++ b/packages/stories/src/features/StockChart.tsx
@@ -70,9 +70,9 @@ class StockChart extends React.Component<StockChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max + 5];
 
         const gridHeight = height - margin.top - margin.bottom;
 
diff --git a/packages/stories/src/features/annotations/Annotations.tsx b/packages/stories/src/features/annotations/Annotations.tsx
index 112c8327d..d9c4dcd10 100644
--- a/packages/stories/src/features/annotations/Annotations.tsx
+++ b/packages/stories/src/features/annotations/Annotations.tsx
@@ -42,9 +42,9 @@ class Annotations extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/features/axis/Axis.tsx b/packages/stories/src/features/axis/Axis.tsx
index 97208f8e8..705e4f73e 100644
--- a/packages/stories/src/features/axis/Axis.tsx
+++ b/packages/stories/src/features/axis/Axis.tsx
@@ -36,9 +36,9 @@ class AxisExample extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/features/coordinates/Coordinates.tsx b/packages/stories/src/features/coordinates/Coordinates.tsx
index b44b3b014..763f1eeb6 100644
--- a/packages/stories/src/features/coordinates/Coordinates.tsx
+++ b/packages/stories/src/features/coordinates/Coordinates.tsx
@@ -35,9 +35,9 @@ class Coordinates extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/features/cursors/Cursors.tsx b/packages/stories/src/features/cursors/Cursors.tsx
index e3f2b9053..be688a87d 100644
--- a/packages/stories/src/features/cursors/Cursors.tsx
+++ b/packages/stories/src/features/cursors/Cursors.tsx
@@ -36,9 +36,9 @@ class Cursors extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         const { customX, ...cursorProps } = rest;
 
diff --git a/packages/stories/src/features/interaction/Interaction.tsx b/packages/stories/src/features/interaction/Interaction.tsx
index 0defd6954..7a5559f6f 100644
--- a/packages/stories/src/features/interaction/Interaction.tsx
+++ b/packages/stories/src/features/interaction/Interaction.tsx
@@ -46,9 +46,9 @@ class Interaction extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/features/scales/Scales.tsx b/packages/stories/src/features/scales/Scales.tsx
index 87b38c804..bb673a335 100644
--- a/packages/stories/src/features/scales/Scales.tsx
+++ b/packages/stories/src/features/scales/Scales.tsx
@@ -29,9 +29,9 @@ class Scales extends React.Component<ChartProps> {
         const { data, height, ratio, width, xScale = scaleTime(), yScale } = this.props;
 
         const xAccessor = (d: IOHLCData) => d.date;
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/features/tooltips/Tooltips.tsx b/packages/stories/src/features/tooltips/Tooltips.tsx
index 13ddbedcc..f76a9f83f 100644
--- a/packages/stories/src/features/tooltips/Tooltips.tsx
+++ b/packages/stories/src/features/tooltips/Tooltips.tsx
@@ -47,9 +47,9 @@ class Tooltips extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/atr/AtrIndicator.tsx b/packages/stories/src/indicators/atr/AtrIndicator.tsx
index e3cd4463e..86d5eef68 100644
--- a/packages/stories/src/indicators/atr/AtrIndicator.tsx
+++ b/packages/stories/src/indicators/atr/AtrIndicator.tsx
@@ -41,9 +41,9 @@ class ATRIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/bollingerBand/BollingerIndicator.tsx b/packages/stories/src/indicators/bollingerBand/BollingerIndicator.tsx
index 67ccbc71e..244490df2 100644
--- a/packages/stories/src/indicators/bollingerBand/BollingerIndicator.tsx
+++ b/packages/stories/src/indicators/bollingerBand/BollingerIndicator.tsx
@@ -41,9 +41,9 @@ class BollingerIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/compare/CompareIndicator.tsx b/packages/stories/src/indicators/compare/CompareIndicator.tsx
index f80715df1..f5e9e001a 100644
--- a/packages/stories/src/indicators/compare/CompareIndicator.tsx
+++ b/packages/stories/src/indicators/compare/CompareIndicator.tsx
@@ -50,9 +50,9 @@ class CompareIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/elderRay/ElderRayIndicator.tsx b/packages/stories/src/indicators/elderRay/ElderRayIndicator.tsx
index 4bfa1349d..54fb99432 100644
--- a/packages/stories/src/indicators/elderRay/ElderRayIndicator.tsx
+++ b/packages/stories/src/indicators/elderRay/ElderRayIndicator.tsx
@@ -39,9 +39,9 @@ export class ElderRayIndicatorChart extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/ema/EmaIndicator.tsx b/packages/stories/src/indicators/ema/EmaIndicator.tsx
index 9a211fc3f..4e05e729c 100644
--- a/packages/stories/src/indicators/ema/EmaIndicator.tsx
+++ b/packages/stories/src/indicators/ema/EmaIndicator.tsx
@@ -44,9 +44,9 @@ class EMAIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/forceIndex/ForceIndicator.tsx b/packages/stories/src/indicators/forceIndex/ForceIndicator.tsx
index ee739b66a..0f3cabb5d 100644
--- a/packages/stories/src/indicators/forceIndex/ForceIndicator.tsx
+++ b/packages/stories/src/indicators/forceIndex/ForceIndicator.tsx
@@ -44,9 +44,9 @@ class ForceIndicator extends React.Component<ChartProps> {
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
         const yAccessor = fiEMA13.accessor();
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/indicators/macd/MacdIndicator.tsx b/packages/stories/src/indicators/macd/MacdIndicator.tsx
index cd7f4c640..522bf94cd 100644
--- a/packages/stories/src/indicators/macd/MacdIndicator.tsx
+++ b/packages/stories/src/indicators/macd/MacdIndicator.tsx
@@ -49,9 +49,9 @@ class MACDIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         const yAccessor = this.macdCalculator.accessor();
         const options = this.macdCalculator.options();
diff --git a/packages/stories/src/indicators/rsi/RsiIndicator.tsx b/packages/stories/src/indicators/rsi/RsiIndicator.tsx
index af012d564..6fecf8972 100644
--- a/packages/stories/src/indicators/rsi/RsiIndicator.tsx
+++ b/packages/stories/src/indicators/rsi/RsiIndicator.tsx
@@ -35,9 +35,9 @@ class RSIIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         const yAccessor = this.rsiCalculator.accessor();
 
diff --git a/packages/stories/src/indicators/sar/SarIndicator.tsx b/packages/stories/src/indicators/sar/SarIndicator.tsx
index 1135daee5..01e7821d4 100644
--- a/packages/stories/src/indicators/sar/SarIndicator.tsx
+++ b/packages/stories/src/indicators/sar/SarIndicator.tsx
@@ -41,9 +41,9 @@ class SARIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         const yAccessor = this.sarCalculator.accessor();
 
diff --git a/packages/stories/src/indicators/sto/StoIndicator.tsx b/packages/stories/src/indicators/sto/StoIndicator.tsx
index 316bf5224..f146411e6 100644
--- a/packages/stories/src/indicators/sto/StoIndicator.tsx
+++ b/packages/stories/src/indicators/sto/StoIndicator.tsx
@@ -61,9 +61,9 @@ class StoIndicator extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const min = xAccessor(data[data.length - 1]);
+        const max = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         const gridHeight = height - margin.top - margin.bottom;
 
diff --git a/packages/stories/src/series/area/basicAreaSeries.tsx b/packages/stories/src/series/area/basicAreaSeries.tsx
index 985e38958..55cd85579 100644
--- a/packages/stories/src/series/area/basicAreaSeries.tsx
+++ b/packages/stories/src/series/area/basicAreaSeries.tsx
@@ -24,9 +24,9 @@ class BasicAreaSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/bar/basicBarSeries.tsx b/packages/stories/src/series/bar/basicBarSeries.tsx
index 1d865dbba..b5b59ad97 100644
--- a/packages/stories/src/series/bar/basicBarSeries.tsx
+++ b/packages/stories/src/series/bar/basicBarSeries.tsx
@@ -24,9 +24,9 @@ class BasicBarSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/baseline/basicBaselineSeries.tsx b/packages/stories/src/series/baseline/basicBaselineSeries.tsx
index 6411dbedd..5451a4b06 100644
--- a/packages/stories/src/series/baseline/basicBaselineSeries.tsx
+++ b/packages/stories/src/series/baseline/basicBaselineSeries.tsx
@@ -24,9 +24,9 @@ class BasicBaselineSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
         const base = 56;
 
         return (
diff --git a/packages/stories/src/series/candlestick/basicCandlestick.tsx b/packages/stories/src/series/candlestick/basicCandlestick.tsx
index ce215a443..9e4916098 100644
--- a/packages/stories/src/series/candlestick/basicCandlestick.tsx
+++ b/packages/stories/src/series/candlestick/basicCandlestick.tsx
@@ -24,9 +24,9 @@ class BasicCandlestick extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx b/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
index ef1eeea0c..de6b4ed85 100644
--- a/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
+++ b/packages/stories/src/series/heikinAshi/basicHeikinAshiSeries.tsx
@@ -29,9 +29,9 @@ class BasicHeikinAshiSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/kagi/basicKagiSeries.tsx b/packages/stories/src/series/kagi/basicKagiSeries.tsx
index 6060c5047..10b607d80 100644
--- a/packages/stories/src/series/kagi/basicKagiSeries.tsx
+++ b/packages/stories/src/series/kagi/basicKagiSeries.tsx
@@ -29,9 +29,9 @@ class BasicKagiSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
         return (
             <ChartCanvas
                 height={height}
diff --git a/packages/stories/src/series/line/basicLineSeries.tsx b/packages/stories/src/series/line/basicLineSeries.tsx
index 9579f24a0..f1b0014df 100644
--- a/packages/stories/src/series/line/basicLineSeries.tsx
+++ b/packages/stories/src/series/line/basicLineSeries.tsx
@@ -24,9 +24,9 @@ class BasicLineSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/ohlc/basicOHLCSeries.tsx b/packages/stories/src/series/ohlc/basicOHLCSeries.tsx
index 81fa42b48..13ab391e3 100644
--- a/packages/stories/src/series/ohlc/basicOHLCSeries.tsx
+++ b/packages/stories/src/series/ohlc/basicOHLCSeries.tsx
@@ -29,9 +29,9 @@ class BasicOHLCSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx b/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
index 9b102bbd1..f43e739e3 100644
--- a/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
+++ b/packages/stories/src/series/pointAndFigure/basicPointAndFigureSeries.tsx
@@ -29,9 +29,9 @@ class BasicPointAndFigureSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/renko/basicRenkoSeries.tsx b/packages/stories/src/series/renko/basicRenkoSeries.tsx
index 321fc90ad..28db31735 100644
--- a/packages/stories/src/series/renko/basicRenkoSeries.tsx
+++ b/packages/stories/src/series/renko/basicRenkoSeries.tsx
@@ -29,9 +29,9 @@ class BasicRenkoSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(calculatedData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const max = xAccessor(data[data.length - 1]);
+        const min = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [min, max];
 
         return (
             <ChartCanvas
diff --git a/packages/stories/src/series/scatter/basicScatterSeries.tsx b/packages/stories/src/series/scatter/basicScatterSeries.tsx
index 30a45f595..36301c1ad 100644
--- a/packages/stories/src/series/scatter/basicScatterSeries.tsx
+++ b/packages/stories/src/series/scatter/basicScatterSeries.tsx
@@ -26,9 +26,9 @@ class BasicScatterSeries extends React.Component<ChartProps> {
 
         const { data, xScale, xAccessor, displayXAccessor } = this.xScaleProvider(initialData);
 
-        const start = xAccessor(data[data.length - 1]);
-        const end = xAccessor(data[Math.max(0, data.length - 100)]);
-        const xExtents = [start, end];
+        const maxX = xAccessor(data[data.length - 1]);
+        const minX = xAccessor(data[Math.max(0, data.length - 100)]);
+        const xExtents = [minX, maxX];
 
         const maximium = max<IOHLCData, number>(data, (d) => d.volume);