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.


Jakub Strebeyko staff answered 6 years ago

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.


Jakub Strebeyko staff answered 6 years ago

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! :)


Please insert min. 20 characters.

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