Chart.jsの描画順番

Chart.jsで積み上げ棒グラフと折れ線グラフを表示してみた際に、折れ線グラフを手前に描画したくて調べてみた。

Chart.jsの描画順番はdatasetsに設定した順に手前に描画されるようであるが、公式ページによると描画の順番を指定するには、orderを設定すればよいとの記載があった。

公式ページにはorderが大きい方が手前に描画されるようなサンプルがあり、実際に試してみるとその通りいかなかった。透過度を上げると棒グラフが手前に描画されているように見えるようになった。このサンプルでは棒グラフの色の透過度低いため、折れ線グラフが手前に見えていただけであった。

orderを小さい値に設定したグラフが手前に描画されるようである。ちなみに、orderを指定しないと0として処理される。なので、棒グラフにだけorderを設定しておくと折れ線グラフが手前に描画されるようになった。