※この記事は、個人技術ブログ CodeArchPedia.com の技術メモ（要約）です。
PythonのPlotlyを使って金融チャートを作成しているとき、ローソク足チャートに出来高を重ねようとしてハマりました。最初はCandlestickオブジェクトに直接出来高データを渡そうとしたのですが、当然のようにエラーが出てしまい、どうすればきれいに共存させられるか色々と試行錯誤しました。
何が起きたか（課題）
金融データの可視化でよくある構成ですが、以下のような実装でエラーに直面しました。
- go.Candlestickに直接volume引数を渡すと、Invalid property specifiedという例外が発生する。
- 価格情報と出来高はスケールが全く異なるため、単純に重ね合わせるとグラフが崩れる。
- ズームやスクロールなどのインタラクティブな操作をしても、時間軸がずれてしまいストレスが溜まる。
どう解決したか（概要）
Plotlyのmake_subplots関数を使うことで、価格と出来高を別々のエリアに配置しつつ、X軸を同期させるアプローチをとりました。
- make_subplotsを使って2行1列のグリッドを定義する。
- shared_xaxes=Trueオプションを付与して、時間軸の連動を確保する。
- row_heightsを使って、ローソク足に広めのスペースを、出来高に少しコンパクトなスペースを割り当てる。
- 上段にgo.Candlestick、下段にgo.Barをそれぞれ配置する。
この構成にすることで、データの可読性を保ったまま、市場の勢いを直感的に把握できるチャートが完成しました。
効果（Before/After）
対策前はエラーで表示すらできなかったチャートが、以下のように見違えるほど整理されました。
- Before：出来高のスケールに引きずられてローソク足が押しつぶされる、あるいは引数エラーで描画不能。
- After：価格と出来高が独立して表示され、かつ時間軸が完全に同期。マウスホイールでの拡大縮小も違和感なく動作。
また、応用として陽線・陰線に応じて出来高のバーの色を変えることで、視覚的な分析効率が大幅に向上しました。
🚀 詳細な設定とコードはこちら
具体的な実装コードの全文や、陽線・陰線で色を塗り分けるための詳細なデータ加工ロジックは元のブログで公開しています。