複数系グラフ表示のためのフレームワークを探しています

以下のような特徴をもつグラフを表示することができるフレームワークをご存知ないでしょうか？

スマホなどで見るウェブ画面に表示されるあるグラフについてユーザーさんに
・複数のレンジの線をひとつのグラフに表示したい
・カーソルによってグラフの値を読み取りたい
という希望がありまして可能な方法を検討しています。

当方JavaScriptを少しかじったことがある程度の者なので、
自前でイチから作るのは無理だと思い、
何かしらのフレームワークのようなものを探しています。

具体的には、

１）グラフは折れ線グラフを使用します。

２）複数の系をひとつのグラフに表示したいです。
例えば、ある中華料理店で、
・線1：気温（レンジ：-10～50℃）
・線2：麻婆豆腐の注文数（レンジ：0～50人前）
・線3：餃子の注文数（レンジ：0～100人前）
・線4：ビールの注文数（レンジ：0～500杯）
の4つの線を一つグラフに表示して、日々の気温と売れ筋商品の相関を見たいとします。
（強引な例ですみません...。）
ですので、この場合、X軸が日付、Y軸が4種類になります。

３）目盛りの切り替えを可能にしたいです。
上の例ではY軸の目盛は４種類になりますが、
常にすべて表示しておくとそれだけで画面のかなりのスペースを占めますので、
表示されるのはいずれか１種類のみとして切り替えられるようにしたいです。
つまり、線は４本表示されているものの、Y軸目盛はそのうちのひとつだけというものです。

　　線の色はそれぞれ別の色にしますが、目盛にも対応する色を付けたいです。
例えば、気温を赤色線、ビールを青色線とするなら、
Y軸目盛に気温を選択して-10～50℃と表示する際は赤色で、ビールなら青色のY軸目盛で、という具合です。

４）グラフをクリックすると縦線が表示され、４本のグラフに交差する場所にそれぞれの値が表示されます。
４本の交差点すべての値でなく、現在選択されている目盛の対象グラフの値だけの表示でも構いません。

５）1年分を表示するとして、横に長いグラフになるので、スクロールが可能としたいです。
このとき、Y軸は常にグラフの左に固定で表示される

というようなものを探しています。
一応いろいろとサンプルを探してみたのですが、
特に２）について、複数の線をひとつのグラフに出しているものはあるものの、
どれもひとつのレンジのようで、今回のようにレンジの異なるものが出せるかどうかが分からなかった次第です。

できそうになければひとつのグラフに１本の線のみで我慢してもらおうと考えていますが、
もし実現可能なフレームワークをご存知でしたらご教授ください。
よろしくお願い致します。