Chart.JS does not appear in the modal bootstrap!

Question

I want to show statistics on what percentages of each answer given in a question from a survey I’m projecting here. I studied and saw several tutorials on how to use Charts.JS. It usually works if I create an independent page. But in this particular case I need the chart (in Pizza format) to appear in a Bootstrap Modal. But I’m not getting it at all. The modal is blank and only the line chart of the Chart.JS documentation itself works.

I’m using the following code:

<canvas id="myChart" width="300" height="300"></canvas>

<script type="text/javascript">$('#ModalPadrao3').on('shown.bs.modal', function () {
var option = {
    responsive: true,
};
    var data = [
    {
            value: 300,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
    },
    {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
    },
    {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
    }
];
var ctx = document.getElementById("myChart").getContext('2d');
var myPieChart = new Chart(ctx,{type: 'pie', data: data, options: option});
});
</script>

What’s wrong that only a blank area appears but without the graph I programmed?

Answer 1

In my view, it seems that when setting the value Data is occurring error. I created a functional example from the documentation. Look how it turned out:

$(function() {
  $('#ModalPadrao3').on('shown.bs.modal', function() {
    var option = {
      responsive: true,
    };

    var config = {
      type: 'pie',
      data: {
        datasets: [{
          data: [
            1,
            2,
            3,
            4,
            5,
          ],
          backgroundColor: [
            'red',
            'orange',
            'yellow',
            'green',
            'blue',
          ],
          label: 'Dataset 1'
        }],
        labels: [
          "Vermelho",
          "Laranja",
          "Amarelo",
          "Verde",
          "Azul"
        ]
      },
      options: {
        responsive: true
      }
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myPieChart = new Chart(ctx, config);
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>


<button data-toggle="modal" data-target="#ModalPadrao3" class="btn btn-primary">Abrir modal</button>

<div id="ModalPadrao3" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Título</h4>
      </div>
      <div class="modal-body">
        <canvas id="myChart" width="300" height="300"></canvas>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

Answer 2

@Witnesstruth about your chart size problem, I had a similar problem and managed to solve including a style within the tag canvas

<canvas id="myChart" style="height:40vh; width: 100%"></canvas>