Railsの折れ線グラフに基準線

Question

前提・実現したいこと

railsのアプリケーションで折れ線グラフを組み込もうと考えています。
色々な記事を参考にさせてもらい、chartkickというgemを使おうと思っているのですが、私が実装しようと思っているのは下の画像のような判断の基準となるような横線(水色の線の部分)を設けたグラフになります。

このようなグラフはchartkickでも実装できるでしょうか。
自分なりに調べて見ると、この機能は実装できないのではないかと思い質問させていただきました。

そのため、私が知りたいのは
・chartkickでも基準線を設けることはできるのか。
・chartkickで不可能ならば、railsで基準線を実装できるgemもしくはプラグインは存在するか(無料のタイプでお願いします)
です。

ご存知の方がいらっしゃいましたら回答よろしくお願いいたします。

Answer 1

chartkickは使ったことないので、私ならこんな工夫をしてみて最終的な結果に満足できないようだったら他のライブラリにする、という視点でアイディアを書きます。chartkickのドキュメントをざっと読んだ限りでは水平線を描く命令は見当たりませんでしたので。

• 基準線をグラフとして書いてしまう。

つまり、「上限」をline1、「下限」をline2として、グラフの上下にline1、line2をプロットする。

<%= line_chart @goals.map { |goal|
   {name: goal.name, data: goal.feats.group_by_week(:created_at).count}
} %>

がMultiple seriesとして参考に挙がっている（公式ドキュメント）

• line1、line2はグラフのX座標より小さいものと、大きいものを恣意的に選ぶ。

グラフとしては最大値と最小値を結ぶだけ

• line1、line2のx-axisが部分的に消せるなら最小値と最大値を消す。

<%= line_chart data, xmin: "2018-01-01", xmax: "2019-01-01" %>で試してみる。

• カラーは<%= line_chart data, colors: ["#b00", "#666"] %>で変更できそう。

公式ドキュメントのオプションを読んで、工夫してみてください。

Comments

[wathu]

そうですね。
確かにMultiple seriesで必要なものを書き足せば良さそうです。
アイデアありがとうございます。
これでダメなら基準線なしのグラフでやってみます。