Customize Pie Chart Legends postion

Topic: Customize Pie Chart Legends postion

BizRTC pro asked 6 years ago

Hi I want to change the postion of Legends in my charts. By default its shown on the top of the page. I want it to be on the right side of my pie chart I have created this snippet PieChart.

My code is :

//pie
    var ctxP = document.getElementById("seo").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["Incoming Calls", "OutGoing Calls ", "Missed Calls", "Busy Calls"],
        color:["#000000"],
        datasets: [{
          data: [10, 20,40, 60],
          backgroundColor: ["#4285F4", "#ffbb33", "#45cafc", "#FF5252"],
          hoverBackgroundColor: ["#6ea0f2", "#fec451", "#78daffbtn-primaryvisit", "#fa6e6e"],
        }]
      },
      options: {
        responsive: true
      }
    });

How do I set the legends to right or any other postion! Please provide some details on how to customize this.

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

Hi there @BizRTC

Thanks for reaching out! you can easily customize position of the legend by using configuration passed into the options.legend namespace.

  var ctxP = document.getElementById("seo").getContext('2d');
    var myPieChart = new Chart(ctxP, {
      type: 'pie',
      data: {
        labels: ["Incoming Calls", "OutGoing Calls ", "Missed Calls", "Busy Calls"],
        color:["#000000"],
        datasets: [{
          data: [10, 20,40, 60],
          backgroundColor: ["#4285F4", "#ffbb33", "#45cafc", "#FF5252"],
          hoverBackgroundColor: ["#6ea0f2", "#fec451", "#78daffbtn-primaryvisit", "#fa6e6e"],
        }]
      },
      options: {
        responsive: true,
        legend: {
          position: 'bottom'
        }
      }
    });

It accepts string values of 'top', 'bottom', 'left' and 'right'. Hope this helps! And good luck.

With Best Regards, Kuba

BizRTC pro commented 6 years ago

Thanks Kuba, This was really helpful. Further more do we have any document which I can refer to make other custom changes ? like changing the font color etc.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there @BizRTC,

MDB implements Chart.js, their documentation on fonts might be a little more thoughout than our mirror. Good luck in your charting! :)

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: 4.6.1
Device: Windows
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

BizRTC

Pro User

95Support score
18Questions 2Answers

0Snippets likes 2Snippets