Sparkline in Grid in Tab Rendering Issue

When the page first loads I have several tabs with grids loaded in each. Each grid has the exact same attribute, settings, etc, just different data(think categories). Each grid has a column which displays a sparkline graph. When I switch to a different tab, that column shows the sparkline graph in the column but it is "scrunched". Now if I take the browser window and resize it, it fixes itself. How do I fix this issue? Please see attached images.

<div class="control-section">      <div id="sparkline" class="row">          <div class="cols-sample-area">              <script type="text/x-template" id="ord_columnTemp1">                  <div id="spkline${EmployeeID}" />  // Here bind the sparkline graph based on EmployeeID data basis              </script>             <script type="text/x-template" id="cus_columnTemp1">                  <div id="spkline${EmployeeID}" /> // Here bind the sparkline graph based on EmployeeID data basis              </script>        .   .     .    .      <div class="e-sample-resize-container">          <div id="tab_orientation">              <div class="e-tab-header">                  <div>OrderID</div>                  <div>CustomerID</div>                              </div>              <div class="e-content">                  <div>                                          <div id="Order_Grid">                      </div>                  </div>                  <div>                                          <div id="Customer_Grid">                                             </div>                  </div>                            </div>          </div>      </div>  </div>        <script>              var tabObj = new ej.navigations.Tab({              heightAdjustMode: 'None',              height: 320,              showCloseButton: true,          })          tabObj.appendTo('#tab_orientation');                               var grid = new ej.grids.Grid({                    .  .  .  .                  columns: [                      .   .    .   .                     { headerText: 'Tax per annum', template: '#ord_columnTemp1', textAlign: 'Center'  },  // bind the sparkline group on grid column                  ],              });          grid.appendTo('#Order_Grid');                           var grid1 = new ej.grids.Grid({                    .    .    .    .                 columns: [                      { headerText: 'Tax per annum', template: '#cus_columnTemp1', textAlign: 'Center'  }, // bind the sparkline group on grid column                                        ],              });          grid1.appendTo('#Customer_Grid');  var line = new ej.charts.Sparkline({                      height: '50px',                      width: '150px',                      lineWidth: 2,                      valueType: 'Numeric',                      fill: '#3C78EF',                      dataSource: getSparkData('line', i)                  });  line.appendTo('#spkline' + i);

1. Share the step by step replication procedure to reproduce in our end.
2. If possible share video to demonstrate issue
3. If you modify the sample for your requirement please send the code changes.