ChartJSの凡例表示を左寄せしたい

##やりたい事
ChartJSにて、折れ線グラフを作りました。
やりたい事は、凡例（出勤、欠勤）がセンタリングされているのを、
左寄せにしたい。

それだけです。

試した事

色々と調べたのですが、うまくいきませんでした。

他にも、日付を間引いたりやりたい事だらけなのですが、
それは難易度が高いようで回答が付かなかった為諦めてます。

##ソース
ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>テスト折れ線グラフ</title>
</head>
<body>
  <canvas id="linechart" width="300" height="300"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
var ctx = document.getElementById("linechart").getContext('2d');
var linechart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ["8/01", "8/2", "8/5", "8/6", "8/7", "8/8", "8/9", "8/11", "9/1"],
      datasets: [
      {
         label: "出勤",
         borderColor: 'red',
         fill: false,
         data: [0, 4, 12, 23, 5, 21, 29, 22, 24],
      },
      {
         label: "欠勤",
         borderColor: 'blue',
         fill: false,
         data: [0, 2, 1, 12, 3, 6, 21, 20, 12],
      },
      ]
   },
   options: {
      responsive: false,
   }
});
</script>
</body>
</html>

codepenはこちら
https://codepen.io/aratamaru/pen/KxzzEP

行動規範の内容に同意します

回答2件

https://misc.0o0o.org/chartjs-doc-ja/configuration/legend.html

legendのpositionで調節出来ませんか？
スマホしかないので試せてません。

投稿2018/08/27 14:41

oikashinoa

総合スコア2826

Tatsurou

2018/08/28 08:24

以下を追加しましたが、左寄せできませんでした。これは、凡例をどこに置くかのようです。左なら、折れ線グラフの左辺に表示するといったオプションのようです。 options: { responsive: false, legend: { display: true, position: 'top', }, }

oikashinoa

2018/08/29 08:45

失礼しました。 generateLegend() で自前で生成すれば良さそうです。一から作るのではなく、デフォルト値があるらしいです(legendtemplate？)のでそれを修正すれば楽かと。下でもlegendTemplateいじっているので参考にして左寄せにしてみてください http://d.hatena.ne.jp/akishin999/touch/20140715/1405434271

行動規範の内容に同意します