diff --git a/packages/charts/src/ChartCanvas.tsx b/packages/charts/src/ChartCanvas.tsx
index 5bf4c402a..89466f605 100644
--- a/packages/charts/src/ChartCanvas.tsx
+++ b/packages/charts/src/ChartCanvas.tsx
@@ -512,15 +512,18 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             fullData: this.fullData,
         };
     }
+
     public getCanvasContexts() {
         if (this.canvasContainerNode) {
             return this.canvasContainerNode.getCanvasContexts();
         }
     }
+
     public generateSubscriptionId() {
         this.lastSubscriptionId++;
         return this.lastSubscriptionId;
     }
+
     public clearBothCanvas() {
         const canvases = this.getCanvasContexts();
         if (canvases && canvases.axes) {
@@ -531,6 +534,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             ], this.props.ratio);
         }
     }
+
     public clearMouseCanvas() {
         const canvases = this.getCanvasContexts();
         if (canvases && canvases.mouseCoord) {
@@ -540,6 +544,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             ], this.props.ratio);
         }
     }
+
     public clearThreeCanvas() {
         const canvases = this.getCanvasContexts();
         if (canvases && canvases.axes) {
@@ -551,6 +556,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             ], this.props.ratio);
         }
     }
+
     public subscribe(id, rest) {
         const { getPanConditions = functor({
             draggable: false,
@@ -562,18 +568,22 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             getPanConditions,
         });
     }
+
     public unsubscribe(id) {
         this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
     }
+
     public getAllPanConditions() {
         return this.subscriptions
             .map((each) => each.getPanConditions());
     }
+
     public setCursorClass(className) {
         if (this.eventCaptureNode != null) {
             this.eventCaptureNode.setCursorClass(className);
         }
     }
+
     public amIOnTop(id) {
         const dragableComponents = this.subscriptions
             .filter((each) => each.getPanConditions().draggable);
@@ -581,6 +591,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
         return dragableComponents.length > 0
             && last(dragableComponents).id === id;
     }
+
     public handleContextMenu(mouseXY, e) {
         const { xAccessor, chartConfig, plotData, xScale } = this.state;
 
@@ -593,6 +604,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             currentCharts,
         }, e);
     }
+
     public calculateStateForDomain(newDomain) {
         const {
             xAccessor,
@@ -633,6 +645,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
             chartConfig,
         };
     }
+
     public pinchZoomHelper(initialPinch, finalPinch) {
         const { xScale: initialPinchXScale } = initialPinch;
 
@@ -745,7 +758,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
         if (this.panInProgress) {
             return;
         }
-        // console.log("zoomDirection ", zoomDirection, " mouseXY ", mouseXY);
+
         const { xAccessor, xScale: initialXScale, plotData: initialPlotData } = this.state;
         const {
             zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier,
@@ -1171,13 +1184,20 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
 
         const {
             type = ChartCanvas.defaultProps.type,
+            useCrossHairStyleCursor,
+            onSelect,
             height,
             width,
             margin = ChartCanvas.defaultProps.margin,
             className,
             zIndex = ChartCanvas.defaultProps.zIndex,
-            defaultFocus, ratio, mouseMoveEvent, panEvent, zoomEvent } = this.props;
-        const { useCrossHairStyleCursor, onSelect } = this.props;
+            defaultFocus,
+            ratio,
+            mouseMoveEvent,
+            panEvent,
+            zoomEvent,
+            disableInteraction,
+        } = this.props;
 
         const { plotData, xScale, xAccessor, chartConfig } = this.state;
         const dimensions = getDimensions(this.props);
@@ -1213,15 +1233,13 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
                             mouseMove={mouseMoveEvent && interaction}
                             zoom={zoomEvent && interaction}
                             pan={panEvent && interaction}
-
                             width={dimensions.width}
                             height={dimensions.height}
                             chartConfig={chartConfig}
                             xScale={xScale}
                             xAccessor={xAccessor}
                             focus={defaultFocus}
-                            disableInteraction={this.props.disableInteraction}
-
+                            disableInteraction={disableInteraction}
                             getAllPanConditions={this.getAllPanConditions}
                             onContextMenu={this.handleContextMenu}
                             onClick={this.handleClick}
@@ -1230,11 +1248,9 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
                             onMouseMove={this.handleMouseMove}
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
-
                             onDragStart={this.handleDragStart}
                             onDrag={this.handleDrag}
                             onDragComplete={this.handleDragEnd}
-
                             onZoom={this.handleZoom}
                             onPinchZoom={this.handlePinchZoom}
                             onPinchZoomEnd={this.handlePinchZoomEnd}
diff --git a/packages/charts/src/EventCapture.tsx b/packages/charts/src/EventCapture.tsx
index dc4cbf10b..ac139fbbb 100644
--- a/packages/charts/src/EventCapture.tsx
+++ b/packages/charts/src/EventCapture.tsx
@@ -110,7 +110,10 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
     }
 
     public componentDidMount() {
-        if (this.node) {
+
+        const { disableInteraction } = this.props;
+
+        if (!disableInteraction && this.node) {
             select(this.node)
                 .on(MOUSEENTER, this.handleEnter)
                 .on(MOUSELEAVE, this.handleLeave);
@@ -124,7 +127,10 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
     }
 
     public componentWillUnmount() {
-        if (this.node) {
+
+        const { disableInteraction } = this.props;
+
+        if (!disableInteraction && this.node) {
             select(this.node)
                 .on(MOUSEENTER, null)
                 .on(MOUSELEAVE, null);
@@ -474,7 +480,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
                 .on(TOUCHEND, null);
 
             if (this.panHappened
-                // && !this.contextMenuClicked
                 && panEnabled
                 && onPanEnd) {
                 const { dx, dy } = this;
@@ -553,7 +558,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
                 const touch2Pos = touchPosition(getTouchProps(e.touches[1]), e);
 
                 if (this.panHappened
-                    // && !this.contextMenuClicked
                     && panEnabled
                     && onPanEnd) {
 
@@ -579,7 +583,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
         const [touch1Pos, touch2Pos] = touches(this.node);
         const { xScale, zoom: zoomEnabled, onPinchZoom } = this.props;
 
-        // eslint-disable-next-line no-unused-vars
         const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;
 
         if (zoomEnabled && onPinchZoom) {
@@ -601,7 +604,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
 
         const { zoom: zoomEnabled, onPinchZoomEnd } = this.props;
 
-        // eslint-disable-next-line no-unused-vars
         const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;
 
         if (zoomEnabled && onPinchZoomEnd) {
@@ -623,11 +625,13 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
 
     public render() {
         const { height, width, disableInteraction, useCrossHairStyleCursor } = this.props;
-        const className = this.state.cursorOverrideClass !== undefined
-            ? this.state.cursorOverrideClass
-            : !useCrossHairStyleCursor ? "" : this.state.panInProgress
-                ? "react-financial-charts-grabbing-cursor"
-                : "react-financial-charts-crosshair-cursor";
+
+        const className = disableInteraction ? undefined :
+            this.state.cursorOverrideClass !== undefined
+                ? this.state.cursorOverrideClass
+                : !useCrossHairStyleCursor ? undefined : this.state.panInProgress
+                    ? "react-financial-charts-grabbing-cursor"
+                    : "react-financial-charts-crosshair-cursor";
 
         const interactionProps = disableInteraction || {
             onMouseDown: this.handleMouseDown,