Chart.jsを使うと簡単にチャートが作成できて嬉しくなる。
サイト内にチャートを配置したいみたいな案件があったので、Chart.jsを使おうと思ったのだが、困ったことがでてきた。
チャートの下に「男性」とか「女性」とかある。(Legendと呼ぶらしい)
このLegendのポジションを操るオプションがあるのだが、まさかのtop
とbottom
しか選択できずleft
やright
には配置できないらしい。
公式ドキュメント 「Position of the legend. Options are 'top' or 'bottom'」
ぼく 「ほえー...」
さらにChart.jsはCanvasを使用して作られているためDOMを弄くり倒すことも難しい。
辛い。
解決方法
myChart.generateLegend();
すれば
<ul class="0-legend"><li><span style="background-color:rgba(54, 162, 235, 0.2)"></span>男性</li><li><span style="background-color:rgba(255, 99, 132, 0.2)"></span>女性</li></ul>
のような、便利なHTMLが吐き出されるからそれをinnerHTMLだとかでDOMに突っ込めばOKっぽい。めでたい。