title: Why doesn't my ChartJS graph work in an iframe?
body: <p>I combined these three Elements (CSS, JavaScript, HTML) to put it into my Wix Website, which however did not work. Does anyone has an idea why it doesn't work, since in the <a href="https://jsfiddle.net/rjtsbeLc/3/" rel="nofollow noreferrer">demo</a> it works just fine. The problem is that on the Website it shows only "89%" and the pie does not show up. The code is stored in an HTML iframe.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
  
      &lt;style type="text/css"&gt;
          .outer {
              position: relative;
              width: 600px;
              height: 400px;
          }
  
          canvas {
              position: absolute;
          }
  
          .percent {
              position: absolute;
              left: 50%;
              transform: translate(-50%, 0);
              font-size: 80px;
              bottom: 0;
          }
      &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div class="outer"&gt;
          &lt;canvas id="chartJSContainer" width="600" height="400"&gt;&lt;/canvas&gt;
          &lt;canvas id="secondContainer" width="600" height="400"&gt;&lt;/canvas&gt;
          &lt;p class="percent"&gt;
              89%
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var options1 = {
              type: 'doughnut',
              data: {
                  labels: ["Red", "Orange", "Green"],
                  datasets: [{
                      label: '# of Votes',
                      data: [33, 33, 33],
                      backgroundColor: [
                          'rgba(231, 76, 60, 1)',
                          'rgba(255, 164, 46, 1)',
                          'rgba(46, 204, 113, 1)'
                      ],
                      borderColor: [
                          'rgba(255, 255, 255 ,1)',
                          'rgba(255, 255, 255 ,1)',
                          'rgba(255, 255, 255 ,1)'
                      ],
                      borderWidth: 5
                  }]
              },
              options: {
                  rotation: 1 * Math.PI,
                  circumference: 1 * Math.PI,
                  legend: {
                      display: false
                  },
                  tooltip: {
                      enabled: false
                  },
                  cutoutPercentage: 95
              }
          }
  
          var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
          new Chart(ctx1, options1);
  
          var options2 = {
              type: 'doughnut',
              data: {
                  labels: ["", "Purple", ""],
                  datasets: [{
                      data: [88.5, 1, 10.5],
                      backgroundColor: [
                          "rgba(0,0,0,0)",
                          "rgba(255,255,255,1)",
                          "rgba(0,0,0,0)",
                      ],
                      borderColor: [
                          'rgba(0, 0, 0 ,0)',
                          'rgba(46, 204, 113, 1)',
                          'rgba(0, 0, 0 ,0)'
                      ],
                      borderWidth: 3
  
                  }]
              },
              options: {
                  cutoutPercentage: 95,
                  rotation: 1 * Math.PI,
                  circumference: 1 * Math.PI,
                  legend: {
                      display: false
                  },
                  tooltips: {
                      enabled: false
                  }
              }
          }
  
          var ctx2 = document.getElementById('secondContainer').getContext('2d');
          new Chart(ctx2, options2);
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>