Customize Pie Chart Legends postion

Topic: Customize Pie Chart Legends postion

BizRTC pro asked 5 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 5 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

Jakub Strebeyko staff answered 5 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 <code>options.legend</code> namespace.

<pre class="prettyprint"><code> 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'
 }
 }
 });
</code></pre>

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

With Best Regards,
Kuba

Please insert min. 20 characters.

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 5 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

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

ForumUser: 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 2Snippets