CanvasJS chart not rendering properly with slideshow/carousel container

Question

I'm trying to make a Slideshow/carousel with pie charts in it. The charts load when the page loads, but only one is displayed at a time.

The problem is that when I move the slideshow to the side to display the second chart, instead of rendering within it's container it takes up the whole space of it's grandparent. Specifically, the first chart that renders is the correct size, any other chart is wrong.

This doesn't use any PHP or anything of the sort, just javascript, html, css and the canvasjs framework. I've tried forcing the graphs to be a fixed size but when I load the next one it just ignores all of the rules I set.

Here is the code:

/*--------- function that creates the charts ----------*/
function criaGrafico(id, valores, tp) {
  setInner(id, '');
  if (valores == '') return;

  var dados = new Array;
  var title = {
    text: '',
  };
  var legenda = {
    fontSize: "14",
    verticalAlign: "bottom",
    horizontalAlign: "left",
    fontFamily: "sans-serif",
    itemWrap: false
  };

  dados[0] = {
    dataPoints: new Array,
    indexLabelFontSize: 10,
    indexLabelFontFamily: "sans-serif",
    indexLabelFontColor: "darkgrey",
    indexLabelLineColor: "darkgrey",
    indexLabelPlacement: "outside",
    indexLabelMaxWidth: 60,
    type: tp,
    showInLegend: false, // true mmm
    legendMarkerType: 'square'
  };

  var opc = {
    title: title,
    legend: legenda,
    data: dados
  };
  var chart = new CanvasJS.Chart(id, opc);
  var campo = '';
  for (var i = 0, lt = valores.length; i < lt; i++) {
    campo = valores[i].split("|");

    chart.options.data[0].dataPoints.push({
      y: Decimal(campo[0]),
      legendText: campo[4],
      indexLabel: campo[2],
      toolTipContent: campo[1],
      color: campo[3]
        /*,click:function(e){clicouGrafico(e)}*/
      ,
      cursor: "pointer"
    });
  }
  chart.render();
}

/* function that sets the parameters for the chart */
function graficoProj1() {
  var val = new Array();
  val[0] = '71|Finalizadas: 87 (71%)|Fin|green|Finalizadas';
  val[1] = '9|Direcionadas: 12 (9%)|Dir|orange|Direcionadas';
  val[2] = '18|Iniciadas: 22 (18%)|Ini|blue|Iniciadas';

  criaGrafico('chart_inov3', val, "pie");
}

#chart_inov3 {
  margin-left: 15px;
  z-index: 0;
  position: relative;
}

<div class="slideshow-container">
  <div class="projSlides fade">
    <div class='col-d-4 col-t-4'>
      <div id='chart_container' style="height: 170px; width: 170px;">
        <div id="chart_inov3"></div>
      </div>
    </div>
    <!-- some other info that would stay besides the chart, 
      in the same parent container -->
  </div>
</div>

Then, the function graficoProj1 is called when the window loads, along with the other charts that will go into the slideshow, like graficoProj2 and graficoProj3.

The result should be a chart that stays inside it's own container, like so:

However, when I press the "Next" button to the right to display the next slide, the other chart renders like this:

EDIT: I suspect this might be linked to the way I display the containers of the slideshow, since they are first set as display: none and then they get to be display: block when focused. This might cause the charts to not render properly within their container since they are not shown. Rerendering them might fix this problem, but I'm still at a loss at how to.

Does anyone have any idea of what could be causing this?

Answer 1

I've fixed it already, forgot to update. The problem was in the "showSlide" javascript function (which was not in this post). When hidden, the charts don't render, so I just have to call the render function after display: block is shown.