How to align Chart JS "legend" on right-center

javascript charts chart.js bar-chart

15,668

Solution 1

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.

Solution 2

Updated

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

15,668

R.A.Munna

Hi, I am Daydreamer. Always like to learn new technology. I am passionate for nothing except my responsibilities. like to play game, watching movie, traveling and the most thing I like is gossiping (basically where I can learn) I ask question until it's not clear to me and try to give the better answer I am questioned. have confidence to work with any technology but python give me more pleasure. java, C/C++ also interesting to me.

Updated on June 04, 2022

Comments

R.A.Munna almost 2 years
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/
- Udhay Titus almost 5 years
  
  can you add your fiddle here
- sarvon ks almost 5 years
  
  add demo it will be helpful for debug
- R.A.Munna almost 5 years
  
  @UdhayTitusP , I have updated the question with fiddle. Please check it.
R.A.Munna almost 5 years

Your fiddle is working fine. But in my angular project the chart js version is 2.8, I have added the align:'middle' what you have suggested. It doesn't work. One thing is jquery is needed? Thanks for the suggestion and solution +1.
R.A.Munna almost 5 years

chartjs.org/docs/master/getting-started/installation.html. I am using angular 5 already share in question. So I have used this command npm install chart.js --save. Isn't it work? Why or How? please update the answer if you can. as I can accept it. Thank you.
Udhay Titus almost 5 years

try this solution for npm install chart.js --save stackoverflow.com/a/44897944/6108882
Udhay Titus over 4 years

@GuilhermePereira which version of chart js you are using?
Guilherme Pereira over 4 years

The latest on github
Udhay Titus over 4 years

@GuilhermePereira did you checked this fiddle jsfiddle.net/Udhaytitus/1jszf9px/2. This fiddle has latest version of Chart.js which is 2.8.0, if it's not working can you share your jsfiddle link here
NULL pointer about 4 years

The documentation says to use 'center', not 'middle' - but that does not work for me either (doco says:Align - Alignment of the legend. Options are: 'start', 'center', 'end'. Defaults to 'center' for unrecognized values.) Neither working for me on chartjs 2.8
LeeLenalee about 3 years

The master on GitHub is still beta version of the lib, the latest stable build is 2.9.4, in version 2 you can't specify alignment so you will have to use the beta or write a custom plugin for it
Udhay Titus about 3 years

@LeeLenalee updated the answer as your suggestion. It's working now.