CODEWITHSUNDEEP
javascriptchartslabelchart.js
Gabriel Lemos
Gabriel Lemos

Reputation: 75

How to adjust the Js Chart's label?

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.

Need to ajust the label

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>

Upvotes: 1

Views: 74

Answers (1)

Pietro Nadalini
Pietro Nadalini

Reputation: 1800

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>

Upvotes: 1

Related Questions