'How can I change the position of legends in chart.js?

I use chart.js for creating this chart:

enter image description here

I want to change the position of two legends( legend1 and legend2), but it did not work!

NOTE: all features work correctly, but problem is that I can't change position of legends: the version of CDN chart.js :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>

I can't understand, what is the problem? Is it because of it's CDN package version?

my pure js code:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="778" height="433"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
        data: {
        labels: ['۱۴۰۰/۰۱/۰۱', '۱۴۰۰/۰۱/۰۲', '۱۴۰۰/۰۱/۰۳', '۱۴۰۰/۰۱/۰۴', '۱۴۰۰/۰۱/۰۵', '۱۴۰۰/۰۱/۰۶'],
        datasets: [{
            type: 'line',
            label: 'legend1',
            data: [6, 5.5, 4, 7, 5.4, 5.8],
            fill:false,
            borderColor: 'rgb(14, 156, 255)',
            tension:0 },
        {
            type: 'line',
            label: 'legend2',
            data: [6.2, 5.7, 3.8, 7.2, 5.2, 5.9],
            fill:false,
            borderColor: 'rgb(22, 185, 156)',
            tension:0
        } ]
    },
    options: {
          legend: {
                position: 'bottom',
             }, // end: legend
          scales: {
            y: {
                beginAtZero: true,
                display: false }// end: y 
          ,x: {
                grid: {
                   borderDash: [6, 5],
                   lineWidth: 1,
                   color:'#CCCCCC' }// end grid
            }//end:x
        } // end: scales
    } //end options
});
</script>
</body>
</html>
javascripthtmlchart.js


Solution 1:[1]

I believe it needs to be set under the plugins property in options, like

options: {
      plugins: { /// PUT LEGEND UNDER THIS PROP
          legend: {
              position: 'bottom',
          }
      },
      scales: {
        y: {
            beginAtZero: true,
            display: false }// end: y 
      ,x: {
            grid: {
               borderDash: [6, 5],
               lineWidth: 1,
               color:'#CCCCCC' }// end grid
        }//end:x
    } // end: scales
} //end options

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Simeon Gavalyugov

Related Questions