html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Lato";
}

inmydata-insights {
  flex-grow: 1;
  margin: 30px;
  width: 400px;
}

#chartsContainer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: none;
}

window.onload = function () { 
  document
    .getElementById("insights")
    .addEventListener("inmydata.insights.selected", function (event) {
      chartDetails = event.detail;
      document.getElementById("chartsContainer").style.display = "block";
      var vis = document.getElementById("vis");
      vis.setAttribute("subject", chartDetails.subject);
      vis.setAttribute("show-toolbar", false);
      vis.setAttribute("show-tools", false);
      vis.setAttribute("show-tool-toggle", true);
      vis.setAttribute("insight-id", chartDetails.id);
      vis.setAttribute('insight-signature', chartDetails.signature);
      vis.setAttribute('question', chartDetails.question);
      vis.render();
    });
 };