Does not show gauge chart in bootstrap modal window

Greetings, I have the following problem:

I'm doing a gauge graph, using the Gauge.js script, on a Modal window of Bootstrap 3. To this modal I add a view from Laravel. The problem I have is that when I display the modal, the gauge graphic (which uses a canvas) is not drawn. The truth is I have no idea what it may be, I have missed the problem. I leave the scripts:

html

  <div id="titulo_container" class="titulo-Grafico"></div>
      <canvas id="gaugeChart" width="400" height="200" style="width:100%;"></canvas>
       <label class="" style="font-size: 40px; margin-left:160px;" id="gauge-value"></label>
  </div>

Javascript:

 $.get('/monitoreo/enproceso', function(json) {
        //console.log(json.view);
      $('#modalGraficos').empty();
      $('#modalGraficos').append(json.view);
      var optionsProceso = {
        responsive: true,
        barValueSpacing: 1,
        maintainAspectRatio: true,
        animation: {
            duration: 1000
        },
        legend: {
            position: 'bottom',
        },
        stacked: true,
        yAxes: {
            display: false,
        },
        xAxes:{
            display: false
        },
        scales: {
            yAxes: [{
                stacked: true,
                scaleShowVerticalLines: false,
                barPercentage: 0.5,
                categoryPercentage: 0.8,
                gridLines: {
                    display:false,
                    drawOnChartArea:false,
                    offsetGridLines:true
                }
            }],
            xAxes: [{
                showLines: false,
                stacked: false,
                ticks: {
                    beginAtZero: true,
                    mix: 0,
                    max: 100,
                    stepSize: 10
                },
                gridLines: {
                    display:false,
                    drawOnChartArea:false,

                }
            }]
        },
        tooltips: {
            mode: 'index',
            intersect: true,
            callbacks: {
                  label: function(tooltipItems, data) {
                      return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.xLabel+ '%';
            }
        }
        },
      }
      var chrProceso = document.getElementById("chartProceso");
      var target = document.getElementById('gaugeChart');
      var gaugeDiv = document.getElementById("gauge-value");
      var dataProceso = {
          labels: ["Etapa 1" , "Etapa 2" , "Etapa 3" , "Etapa 4" , "Etapa 5" , "Etapa 6"],
          datasets: [{
              label: "% de Avance",
              data: [0,0,0,0,0,0],
              backgroundColor: ['#fda128' , '#fda128' , '#fda128' , '#fda128', '#fda128' , '#fda128']
          }, {
            label: "Total",
            data: [0,0,0,0,0,0],
            backgroundColor: ['#264B59' , '#264B59' , '#264B59', '#264B59' , '#264B59' , '#264B59']
          }],
      };
      var gaugeOpt = {
          lines: 12,
          angle: 0.0,
          lineWidth: 0.44,
          pointer: {
              length: 0.7,
              strokeWidth: 0.035,
              color: '#000000'
          },
          fontSize: 15,
          limitMax: 'false',
          percentColors: [
              [0.0, "#d9534f"],
              [0.50, "#f0ad4e"],
              [1.0, "#5cb85c"]
          ], // !!!!
          strokeColor: '#E0E0E0',
          generateGradient: true // Fill color
      };
      var chrProcesoConfig = {
        type: 'horizontalBar',
        data: dataProceso,
        options: optionsProceso
      };
      var gauge = new Gauge(target).setOptions(gaugeOpt);
      var procesoBar = new Chart(chrProceso, chrProcesoConfig);
      console.log(gauge);
      gauge.maxValue = 100;
      gauge.minValue = 0;
      gauge.setMinValue(0);
      gauge.animationSpeed = 32;
      gauge.set(null);
      gaugeRender(gauge, gaugeDiv);
      $('#modal').modal();
    });

});

Thank you in advance.