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っぽい。めでたい。