CODEWITHSUNDEEP
javascripthtmlreactjschart.js
Arthur
Arthur

Reputation: 3516

Chart.js legend alignment left side

CodeSandbox

How to move that legend to the left? I have tried to use options:{legend:{position: 'left'}}.

Goal: enter image description here

position: left shifts the chart to the right what is not good for me:

enter image description here

Upvotes: 20

Views: 28198

Answers (2)

Alok A
Alok A

Reputation: 271

with version 2.9 as suggested in the documentation, use the plugins namespace for e.g.

this.piechart = new Chart(this.ctx, {
      type: 'pie',
      data: data,
      options: {
        plugins: {
          legend: {
            position: 'right',
            align: 'center'
          }
        }
      }
    });

Upvotes: 3

Thomas Dondorf
Thomas Dondorf

Reputation: 25280

Your code is correct and you will be able to align the legend as following in the future:

legend: {
    position: "top",
    align: "start"
}

But the feature is currently not implemented at the current time (2019-03-30). The feature is already merged and will be released with version 2.9. You either have to wait until version 2.9 will be released or use a development release, which is not recommended as they should only be used for testing purposes.

Upvotes: 39

Related Questions