From 4e134327ebb7b9b29c55a1f680c0f3403a7a7812 Mon Sep 17 00:00:00 2001
From: chriddyp <chris@plot.ly>
Date: Mon, 9 Apr 2018 12:27:28 -0400
Subject: [PATCH 1/3] integration test

---
 test/test_integration.py | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/test/test_integration.py b/test/test_integration.py
index 8b44cc0c9..9ea18ac91 100644
--- a/test/test_integration.py
+++ b/test/test_integration.py
@@ -460,3 +460,39 @@ def update_pathname(n_clicks, current_pathname):
         self.wait_for_text_to_equal('#test-search', '?queryA=valueA')
         self.wait_for_text_to_equal('#test-hash', '')
         self.snapshot('link -- /test/pathname/a?queryA=valueA')
+
+
+    def test_candlestick(self):
+        app = dash.Dash(__name__)
+        app.layout = html.Div([
+            html.Button(
+                id='button',
+                children='Update Candlestick',
+                n_clicks=0
+            ),
+            dcc.Graph(id='graph')
+        ])
+
+        @app.callback(Output('graph', 'figure'), [Input('button', 'n_clicks')])
+        def update_graph(n_clicks):
+            return {
+                'data': [{
+                    'open': [1] * 5,
+                    'high': [3] * 5,
+                    'low': [0] * 5,
+                    'close': [2] * 5,
+                    'x': [n_clicks] * 5,
+                    'type': 'candlestick'
+                }]
+            }
+        self.startServer(app=app)
+
+        button = self.wait_for_element_by_css_selector('#button')
+        self.snapshot('candlestick - initial')
+        button.click()
+        time.sleep(2)
+        self.snapshot('candlestick - 1 click')
+
+        button.click()
+        time.sleep(2)
+        self.snapshot('candlestick - 2 click')

From ea4e66caaa60a80156c6aa5437a02c819fca5997 Mon Sep 17 00:00:00 2001
From: chriddyp <chris@plot.ly>
Date: Mon, 9 Apr 2018 12:09:57 -0400
Subject: [PATCH 2/3] newPlot if finance charts, react otherwise

---
 src/components/Graph.react.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js
index 20b4da617..0315567ba 100644
--- a/src/components/Graph.react.js
+++ b/src/components/Graph.react.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, filter, has, isNil, type} from 'ramda';
+import {contains, intersection, filter, has, isNil, type, pluck} from 'ramda';
 /* global Plotly:true */
 
 const filterEventData = (gd, eventData, event) => {
@@ -73,16 +73,31 @@ export default class PlotlyGraph extends Component {
     plot(props) {
         const {id, figure, animate, animation_options, config} = props;
         const gd = document.getElementById(id);
+
         if (animate && this._hasPlotted && figure.data.length === gd.data.length) {
             return Plotly.animate(id, figure, animation_options);
         } else {
-            return Plotly.react(id, figure.data, figure.layout, config).then(() => {
-                if (!this._hasPlotted) {
-                    this.bindEvents();
-                    Plotly.Plots.resize(document.getElementById(id));
-                    this._hasPlotted = true;
+
+            let PlotMethod;
+            if (intersection(
+                pluck('type', figure.data),
+                ['candlestick', 'ohlc']).length
+            ) {
+                PlotMethod = Plotly.newPlot;
+            } else {
+                PlotMethod = Plotly.react;
+            }
+
+            return PlotMethod(id, figure.data, figure.layout, config).then(
+                () => {
+                    if (!this._hasPlotted) {
+                        this.bindEvents();
+                        Plotly.Plots.resize(document.getElementById(id));
+                        this._hasPlotted = true;
+                    }
                 }
-            });
+            );
+
         }
     }
 

From e133a33eb90d0007c4f5cac436cb3da5f242a184 Mon Sep 17 00:00:00 2001
From: chriddyp <chris@plot.ly>
Date: Mon, 9 Apr 2018 13:50:46 -0400
Subject: [PATCH 3/3] changelog

---
 CHANGELOG.md                    | 5 +++++
 dash_core_components/version.py | 2 +-
 package.json                    | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57d72a343..b2a2d7413 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.22.1] - 2018-04-09
+### Fixed
+- Various bugs with the `ohlc` and `candlestick` chart type in the `dcc.Graph`
+component were fixed. See https://github.com/plotly/dash-core-components/pull/184.
+
 ## [0.22.0] - 2018-04-03
 ### Added
 - Previously, if a user named their app file `dash.py`, an unhelpful error
diff --git a/dash_core_components/version.py b/dash_core_components/version.py
index 81edede8b..66d9d1e39 100644
--- a/dash_core_components/version.py
+++ b/dash_core_components/version.py
@@ -1 +1 @@
-__version__ = '0.22.0'
+__version__ = '0.22.1'
diff --git a/package.json b/package.json
index fb271715d..2ce3c0e38 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",