PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Monday, November 28, 2022

[FIXED] How to create legend position in pie chart.js?

 November 28, 2022     charts, javascript, legend, pie-chart, positioning     No comments   

Issue

i am using chart js for developing my pie chart. i want to create the legend position just like this. anyone please help me to solve this...

enter image description here

here is my code... i actually want the result just like the picture. and i getting error when i use css zoom:70% in html and make the javascript didn't work..

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<style type="text/css">
  body{ background-color: #1f1d1d; font-family: Roboto, Myriad Pro, Segoe UI;zoom:70%;}
  .col-sm-1.content { border: 2px solid #1f1d1d}
</style>
<body>
	  <div class="col-sm-1 content" style="background-color: #4f4f4f; height:377px;"><br><br><br>
        <canvas id="myChartBBC" style="width:375px; height: 375px;"></canvas>
      <br>
        <p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
      </div>
</body>
<script>
  var ctx = document.getElementById('myChartBBC').getContext('2d');
  var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'pie',
      // The data for our dataset
      data: {
          labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
          datasets: [{
              backgroundColor: ['rgb(12, 146, 204)',
                       'rgb(255, 67, 0)',
                       'rgb(131, 0, 255)',
                       'rgb(250, 255, 0)'
                       ],
              borderColor: ['rgb(12, 146, 204)',
                      'rgb(255, 67, 0)',
                      'rgb(131, 0, 255)',
                      'rgb(250, 255, 0)'
                      ],
              data: [73, 17, 3, 7],
          }]
      },

      // Configuration options go here
      options: {
        legend:{
          position: 'bottom',
          labels:{
            fontColor: "white"
          }
        }
      }
  });
  </script>
</html>


Solution

Try this updated code.

<!doctype html>
<html>

<head>
    <title>Pie Chart</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
    body {
        background-color: #1f1d1d;
        font-family: Roboto, Myriad Pro, Segoe UI;
        width: 800px;
        height: 800px;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>

<body>
    <div id="canvas-holder" style="width:30%;background-color: #4f4f4f; height:35%;">
        <canvas id="chart-area"></canvas>
        <p style="text-align:center; color: #fff;font-size: 14px;"><i>Browse by Channel</i></p>
    </div>
    <script>
    var config = {
        type: 'pie',
        data: {
            labels: ["USSD", "URP", "MyTsel App", "Chatbot"],
            datasets: [{
                backgroundColor: ['rgb(12, 146, 204)',
                    'rgb(255, 67, 0)',
                    'rgb(131, 0, 255)',
                    'rgb(250, 255, 0)'
                ],
                borderColor: ['rgb(12, 146, 204)',
                    'rgb(255, 67, 0)',
                    'rgb(131, 0, 255)',
                    'rgb(250, 255, 0)'
                ],
                data: [73, 17, 3, 7],
            }]
        },
        options: {
            responsive: true,
            legend: {
                position: 'bottom',
                labels: {
                    fontColor: "white",
                    boxWidth: 20,
                    padding: 20
                }
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
    </script>
</body>

</html>



Answered By - Chinmoy Samanta
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing