用のチャート描画ライブラリです。棒グラフや円グラフなどの種々のチャートを描く事ができます。利用して作成したローソク足チャートのサンプルはこちらです。次のローソク足を描画します。上図のローソク足を描くコードは次の通りです。こちらは関連するコミットです。コンポーネントについて説明します。各コンポーネントの概要です。ラッパーコンポーネントです。要素に指定したチャートや軸を描画します。軸を描画するためのコンポーネントです。ローソク足を描画するためのコンポーネントです。次に詳細を説明します。scaleグラフのスケールを設定するプロパティです。株価の横軸は時間なので、“time”を設定しています。軸は設定していませんが、この場合はデフォルトの”linear”(リニアスケール)が適用されます。設定することになります。軸と重なるのを防ぐためです。チャートを描くコンポーネント全てのスタイルを設定するプロパティです。一括でできるという感じです。この設定値は、好みで決めました。dependentAxis従属変数側の軸であるかを設定するプロパティです。場合、従属変数側の軸となります。軸であることを指します。tickFormatメモリのラベルのフォーマットを設定するプロパティです。モジュールを利用してフォーマットしています。VictoryCandlestickcandleColors陽線(positive)と陰線(negative)の色を設定するプロパティです。dataチャートとして描画するデータを設定するプロパティです。場合は、次のオブジェクトの配列を設定します。安値}他にもプロパティはありますので、詳細は公式ページの方を参照ください。分かりやすくまとまっています。以上で、ローソク足チャートを描画するための基本的な説明は終了です。次節以降は、応用編の説明します。マウスポインタで合わせたローソク足の株価をツールチップで表示する次の図で示したようにツールチップで株価を表示するための実装を紹介します。こちらは関連するコミットです。次のプロパティの設定を追加します。labelComponentlabels実装は次の通りです。}}/>...labelComponentラベルを描画するための、コンポーネントを設定します。設定しているプロパティについて説明します。constrainToVisibleAreaツールチップの表示が見切れないように、表示場所を可視領域に制限する設定です。styleツールチップに表示するテキストのスタイルを設定するプロパティです。今回はテキストのアライメントを左寄せにする設定をしています。設定するプロパティです。設定しないとラベルがツールチップからはみでてしまうので設定しました。labelsラベルに表示するテキストを設定するプロパティです。今回はその値を元にツールチップに表示するテキストを生成しました。要素ごとに改行が入り、ツールチップに表示する事ができます。使って強引に文字列の配列を返しています。配列で返した理由は、改行コードを含めた文字列を返すと、下図のようにアライメントが揃わなかったからです。この対応は強引な気はしますが、公式サイトで配列で返しているサンプルを見つけたので、やってもいいかと思っています。ズーム機能とカーソル機能ズーム機能は、チャートの指定部分を拡大縮小する機能です。マウスポインタを中心にして、マウスホイールの操作で拡大縮小できます。ズーム後ドラッグ操作で描画位置をずらすことができます。サンプルは公式ページを参照ください。カーソル機能は、チャート上に座標付きのカーソルを表示する機能です。サンプルは公式ページを参照ください。設定だけで簡単に実装可能です。