Chart.js：タイトル/凡例を右に移動

Question

タイトルの上に棒グラフがあります。凡例の位置をグラフの右側に変更するにはどうすればよいですか。他のフォーラムで検索しましたが、何も見つかりませんでした。ここに私のコードは次のとおりです。

let ctx = document.getElementById('canvas'); 
let chart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
       labels: [1, 2, 3, 4, 5], 
       datasets: [{ 
         label: 'Votes', 
         data: [1, 2, 3, 4, 5], 
         backgroundColor: 'rgba(255, 0, 0, 0.2)' 
       }, { 
         label: 'Score', 
         data: [1, 2, 3, 4, 5], 
         backgroundColor: 'rgba(0, 255, 0, 0.2)' 
       }] 
     }, 
     options: { 
       scales: { 
         yAxes: [{ 
           ticks: { 
             beginAtZero: true 
           } 
         }] 
       } 
     } 
}); 

Answer 1

あなたがチャートの右側に凡例を配置するために、あなたのチャートオプションでrightに凡例のpositionプロパティを設定することができ...

options: { 
    legend: { 
     position: 'right' 
    }, 
    ... 
} 

---

ᴅᴇᴍᴏ

let ctx = document.getElementById('canvas').getContext('2d'); 
 
let chart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: [1, 2, 3, 4, 5], 
 
     datasets: [{ 
 
     label: 'Votes', 
 
     data: [1, 2, 3, 4, 5], 
 
     backgroundColor: 'rgba(255, 0, 0, 0.2)' 
 
     }, { 
 
     label: 'Score', 
 
     data: [1, 2, 3, 4, 5], 
 
     backgroundColor: 'rgba(0, 255, 0, 0.2)' 
 
     }] 
 
    }, 
 
    options: { 
 
     legend: { 
 
     position: 'right' 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>