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>