1👍
In order to overflow the chart space, you need to add padding to your chart, which will make it smaller but text will be able to achieve what you want. You can adjust this with the size of your chart.
You would need to change your options like this:
options: {
legend: false,
fontsize: 11,
layout: {
padding: {
right: 50,
left: 50
}
}
}
This seems to be an issue on github, so you can go there and track when they’re able to fix it so you won’t need to add padding to your chart. But this is what they said:
This limitation is native to the restrictions of the canvas not being able to draw anything outside of the the canvas element itself.
If this limitation is encountered, the only blessed workaround is to use custom tooltips, which render using the DOM, and not the canvas.
The maintainers of the repo are aware of this restriction and have decided that there is currently no feasible solution that would not come with very large breaking changes to the way tooltips work. It’s possible that this will be addressed in the next major version of Chart.js, but it is not currently planned.
var myChartcaixa = new Chart(document.getElementById("caixa-chart"), {
type: 'pie',
data: {
labels: ["Total general dos rendimientos (Origenes)", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: false,
fontsize: 11,
layout: {
padding: {
right: 50,
left: 50
}
}
}
});
.chart-style {
width: 300px;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="col-md-5">
<div class="chart-style" style="padding-top:50px">
<canvas id="caixa-chart" width="100" height="100"></canvas>
</div>
</div>