chartjsの凡例を右側に表示したい

Question

前提・実現したいこと

chartjsで折れ線グラフを作成しています。
y軸を左右に設け、凡例を右側に表示させたいです。
正しい設定方法についてご教示ください。
よろしくお願いいたします。

発生している問題・エラーメッセージ

右スケールの内側に凡例が表示されてしまいます。
（現状）左スケール｜グラフ｜凡例｜右スケール
（実現したいこと）左スケール｜グラフ｜右スケール｜凡例

該当のソースコード

<canvas id="chart-line" style="max-width: none"></canvas>

var ctx2 = document.getElementById("chart-line").getContext("2d");
      var myLineChart = new Chart(ctx2,{
        type: 'line',
        data: lineData,
        options: {
          legend: {
            position: 'right',
            labels: {
              boxWidth: 20
            }
          },
          title: {
            display: true,
            fontSize: 18,
            padding: 30,
            text: 'アクセス推移グラフ'
          },
          scales: {
            xAxes: [
              {
                ticks: {
                  autoSkip: false,
                }
              }
            ],
            yAxes: [
              {
                id: 'leftNumberOfPeopleYaxis',
                type: 'linear',
                position: 'left',
                scaleLabel: {
                  display: true,
                  labelString: 'アクセス数・待機人数',
                },
                ticks: {
                  beginAtZero: true,
                  callback: function(value) {if (value % 1 === 0) {return value;}}
                }
              },
              {
                id: 'rightTimeYaxis',
                type: 'linear',
                position: 'right',
                scaleLabel: {
                  display: true,
                  labelString: '待機時間',
                },
                ticks: {
                  beginAtZero: true,
                  callback: function(value) {if (value % 1 === 0) {return value;}}
                }
              },
            ]
          }
        }
      });

Answer 1

凡例を右側に

right指定されているのが、右y軸のパラメーターで、具体的なdataの値が空だからですね。

data:lineData,となっている所が外部入力なのかによりますが、、
具体的に適当な値を入力してやる事で、凡例は出現します。
data:lineData,となっている所を以下に置き換えて動作確認しました。

```
data: {
            labels:["8/1","8/2","8/3","8/4","8/5"],
            datasets:[{
                label:'アクセス数・待機人数',
                data:[120,300,200,210,400],
            },{
                label:'待機時間',
                data:[24,18,10,5,30],
            }]
        },
```
右y軸に別単位を当てはめる等、まだ工夫の余地はありますが、今回は聞かれてもいないことなので。。。

Comments

[i-nr]

ご回答ありがとうございます！
表示はされるのですが、右y軸よりも内側に表示されてしまいます。
右y軸よりも外側に表示させる方法はありますか？

[hectopascal1013]

確認環境(OS,バージョン,ブラウザの種類・バージョンなど情報が足りないのでなんとも。こちらの環境ではおっしゃられている状況が再現できていません。

老婆心ながら、ドットインストールの無料講座にてchart.jsは公開されておりますので、
今回疑問に思われていることも、こちらを学習することで解決できるかもしれません。
https://dotinstall.com/lessons/basic_chartjs

[i-nr]

環境についての記載がなく、失礼しました。
OS: mac 10.14.6、ブラウザ：Chrome 80.0.3987.132　です。

ドットインストールの講座も見てみます！