title: How to create legend position in pie chart.js?
body: <p>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...</p>
  
  <p><a href="https://i.stack.imgur.com/G9vv0.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/G9vv0.jpg" alt="enter image description here"></a></p>
  
  <p>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..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
    body{ background-color: #1f1d1d; font-family: Roboto, Myriad Pro, Segoe UI;zoom:70%;}
    .col-sm-1.content { border: 2px solid #1f1d1d}
  &lt;/style&gt;
  &lt;body&gt;
     &lt;div class="col-sm-1 content" style="background-color: #4f4f4f; height:377px;"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;canvas id="myChartBBC" style="width:375px; height: 375px;"&gt;&lt;/canvas&gt;
        &lt;br&gt;
          &lt;p style="text-align:center; color: #fff;font-size: 14px;"&gt;&lt;i&gt;Browse by Channel&lt;/i&gt;&lt;/p&gt;
        &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
    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"
            }
          }
        }
    });
    &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>