title: Angular 8 - Chartist - Not LOADING Charts in the TABLES
body: <p>I'm trying to replicate a carousel function using datatables, bootstrap 4 and chartist. </p>
  
  <p>The IDEA is to generate a list of CARDS based on the records returned from db with its own CHART (BAR CHART) - the component also has a lot of other functions that is happening fine but display of charts is a problem. The first chart shows fine but from second chart onwards I get a <code>Cannot read property 'querySelectorAll' of null</code> issue.</p>
  
  <p>I've the following setup:
  Master Component (dashboard-graph-component):</p>
  
  <ol>
  <li>Has a Table List </li>
  <li>Table has one column with a angular component
  (dashboard-graph-single-component) </li>
  <li>It has INPUTs attributes to load
  master data and an method in the AfterInit to load chart data.</li>
  </ol>
  
  <p>I've set the max rows to show in the table as 1 so to ensure I show only graph card at one time and pagination is going to show another chart in next page.</p>
  
  <p>The Issue:
  If I have 10 rows in the table - I am able to see the BAR GRAPH only on the first ROW - rest all are not visible but with following errors for all subsequent calls:</p>
  
  <pre><code>core.js:5847 ERROR TypeError: Cannot read property 'querySelectorAll' of null
      at Object.Chartist.createSvg (chartist.js:328)
      at constr.createChart (chartist.js:3670)
      at constr.initialize (chartist.js:1842)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
      at Object.onInvokeTask (core.js:24328)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
      at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
      at ZoneTask.invoke (zone.js:487)
      at timer (zone.js:3070)
  </code></pre>
  
  <p>Code for master component:</p>
  
  <pre><code>&lt;div class="table-responsive align-self-center"&gt;
              &lt;table datatable id="showtime-tables" class="table responsive table-striped table-hover" cellspacing="0"
              [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class="all"&gt;{{ dataTable.headerRow[0] | translate}}&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr *ngFor="let row of dataTable.dataRows;let k=index"&gt;
                    &lt;td&gt; 
                      &lt;app-showtime-single-resolution class="col-md-12" *ngIf="showListCarousal"
                      [passedResolutionId]="row[0]" 
                      [resolutionMaster]="this.resolutionList.length&gt;=k?this.resolutionList[k]:0" &gt;
                     &lt;/app-showtime-single-resolution&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>The Single Component:
  HTML:</p>
  
  <pre><code>&lt;div class="card card-chart"&gt;
                      &lt;div class="card-header card-header-icon card-header-danger"&gt;
                        &lt;div class="card-icon"&gt;
                          &lt;i class="material-icons"&gt;pie_chart&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;h4 class="card-title"&gt;Line Chart&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class="card-body"&gt;
                        &lt;div id="{{'chartPreferences2' + this.passedResolutionId}}" class="ct-chart ct-golden-section"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p>Code :</p>
  
  <pre><code>var chartId = '#chartPreferences2'+ this.passedResolutionId;
       setTimeout(() =&gt; {
       new Chartist.Bar(chartId  , dataSimpleBarChart, optionsSimpleBarChart,
       responsiveOptionsSimpleBarChart);
      }, 500);
  </code></pre>
  
  <p>Any help is appreciated.</p>