I am using Chart JS version 2.x. I have prepared a bar chart with chart JS. But I like to align the legend of the chart in right center. Below I am sharing the image.

And the legend position I want.

I have tried it from documentation. In my code

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

Update 1: I am using chart js module in Angular5

Update 2: what I have tried that is /

I am using Chart JS version 2.x. I have prepared a bar chart with chart JS. But I like to align the legend of the chart in right center. Below I am sharing the image.

And the legend position I want.

I have tried it from documentation. In my code

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

Update 1: I am using chart js module in Angular5

Update 2: what I have tried that is https://jsfiddle.net/v4ur38ao/1/

• javascript
• charts
• chart.js
• bar-chart

• can you add your fiddle here – Udhay Titus Commented May 16, 2019 at 10:55
• add demo it will be helpful for debug – sarvon ks Commented May 16, 2019 at 11:08
• @UdhayTitusP , I have updated the question with fiddle. Please check it. – R.A.Munna Commented May 17, 2019 at 2:54

2 Answers 2

Updated

options: {
        plugins: {
            legend: {
              position: "right",
              align: "middle"
          }
        }
      }

use latest version of chart.js : https://www.chartjs.org/dist/master/Chart.min.js for more reference check this documentation and add align:'middle' in your legend it will work's

legend: {
    position: "right",
    align: "middle"
},

var ctx = $('#myChart');

ctx.height(100);

var myChart = new Chart(ctx, {
    type: 'bar',
     data: {
        labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
        datasets: [{
            data: [25, 61, 47, 45, 30],
            label: "Response > 5",
            borderColor: "#5151A1",
            backgroundColor: "#5151A1"
        }, {
            data: [22, 38, 53, 17, 55],
            label: "Response <= 5",
            borderColor: "#408040",
            backgroundColor: "#408040"
        }]
    },
    maintainAspectRatio: false,
    options: {
        responsive: true,
        legend: {
            position: "right",
            align: "middle"
        },
         scales: {

            yAxes: [{
                ticks: {
                    min: 0,
                    //max: 100,
                    callback: function(value) {
                        return value + "%"
                    }
                },
                scaleLabel: {
                    display: true
                    //labelString: "Percentage"
                }
            }]
        }
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

<canvas id="myChart" height="450" width="600"></canvas>

Check your updated fiddle here

If npm install chart.js not working then refer this answer for more details check the chart.js documentation.