title: How to render my apex chart after ajax call is complete?
body: <p>I'm using apex dynamic chart <a href="https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/" rel="nofollow noreferrer">Apex dynamic chart</a></p>
  
  <p>And I'm getting stuck on the ajax call &amp; chart render section. There's Country Bar chart. When I clicked on a country bar, then selected countryID is passed to the updateStacked100Chart function(which calls ajax webapi with countryID ) below to get region data for that country in a stacked100 apex chart. An empty stacked100 apex Chart is rendered first before the ajax call is completed. How do I fix this?</p>
  
  <pre><code> //sourceChart=CountryBarChart,destChartIDToUpdate=Stacked100RegionYearChart(Chart to be updated based on country bar selected)
          function updateStacked100Chart(sourceChart, destChartIDToUpdate) {
              var series = [];
              var seriesIndex = 0;
             var categorySource = [];
              var color = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];
  
              if (sourceChart.w.globals.selectedDataPoints[0]) {
                  //Get selected country bar in CountryBarChart
                  var selectedPoints = sourceChart.w.globals.selectedDataPoints;
                  for (var i = 0; i &lt; selectedPoints[seriesIndex].length; i++) {
                      var selectedIndex = selectedPoints[seriesIndex][i];
                      var selectedCountry = sourceChart.w.globals.labels[selectedIndex];
                      $.ajax({
                          url: "http://localhost:51604/api/Sales/GetSalesByRegion",
                          type: "Get",
                          dataType: "json",
                          cache: false,
                          data: {
  
                              "CountryId": selectedCountry,
                              "page": 0,
                              "limit": 0
                          },
  
                          success: function (data) {
                              // Prepare series &amp;  xaxis category data for stacked100 region chart
                              $.each(data.salesByRegQuery, function (index, item) {
                                  series.push(
                                      {
                                          name: item.EnglishProductCategoryName,
                                          data: item.Total_Margin
                                      });
                                  categorySource.push(item.CalendarYear);
  
                              });
  
  
                          },
                          complete: function (data) {
  
                          },
  
                          error: function (data) {
  
                          }
                      });
                  }
  
                  //These lines of codes below get executed first before ajax call is completed.
                  if (series.length === 0) series = [{
                      data: []
                  }];
                  //So, region stacked100 apex chart source data for series and xaxis aren't updated
                  return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
                      series: series,
                      xaxis: categorySource,
                      colors: color,
                      fill: {
                          colors: color
                      }
                  });
              }
  
          }
  </code></pre>