How to adjust the Js Chart's label?

Question

How can I make the label write out of the chart space? There is a lot of space, but the the remainder of label sentence is cut off due to the space.

This is the chart code:

<div class="col-md-5"> <div class="col-md-10" style="padding-top:50px"> <canvas id="caixa-chart" width="100" height="100"></canvas> </div> </div> //the chart <script> var myChartcaixa = new Chart(document.getElementById("caixa-chart"), { type: 'pie', data: { labels: @Html.Raw(Json.Encode(Model.Select(x => x.Descricao).ToArray())), datasets: [{ data: @Html.Raw(Json.Encode(Model.Select(x => x.Valor).ToArray())), backgroundColor: backgroudColor, borderWidth: 1, }] }, options: { legend: false, fontsize: 11 } }); </script>

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Documentation

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>

Collectives™ on Stack Overflow

How to adjust the Js Chart's label?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related