Question

107

How to create legend position in pie chart.js?

rated 0 times [ 109] [ 2] / answers: 1 / hits: 27650 / 6 Years ago, thu, march 22, 2018, 12:00:00

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

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierre

Add To Favorites

Follow

Total Points: 716

Total Questions: 128

Total Answers: 102

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

answered 6 Years ago payton · Accepted Answer

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>