Chart.js legend took up too much spaces

Long legend nowrap is a known issue check https://github.com/chartjs/Chart.js/issues/3641

May be they can cover it in next releases. For now the solution is to remove the native legend and draw your custom one

I've created this plunk as an example for doghnut chart with custom legend https://embed.plnkr.co/5nuGS2KEV6hvESwGrOse/

First off, set canvas­'s width and height using it­'s native attributes (do not use style attribute), like so :

<canvas id="brandChart" width="700" height="350"></canvas>

^{note: width should be twice the height}

Then, set responsive property to false in your chart options, as such :

options: {
   responsive: false,
   ...
}

ᴅᴇᴍᴏ

var chart = new Chart(brandChart, {
   type: 'doughnut',
   data: {
      labels: ['Etronin Home Appliances Service & trading Pte Ltd', 'Giant'],
      datasets: [{
         data: [30, 70],
         backgroundColor: ['#2196f3', '#4caf50']
      }]
   },
   options: {
      responsive: false,
      legend: {
         display: true,
         position: 'right',
         onClick: null
      },
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="brandChart" width="700" height="350"></canvas>