Bar chart in jsreport using apexchart

Question

I trying to include a bar chart in my jsreport using apexchart but I keep getting chart without any bars or labels. I don't know what I am doing wrong. The engine is handlebars and the recipe is chrome-pdf.

here is the data

{
    "Completedcalls": [
        {
        "Bloemfontein": 2
        },
        {
            "Mafube": 5
        },
        {
            "Phumelela": 6
        },
        {
            "Total": 13
        }
    ]
}

and here is the code for plotting the chart

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
      <div id="myFirstChart"></div>
        <script>
          console.log('mango jerry')
          var a = {{{ReadData Completedcalls}}};
        var options = {
          chart: {
            type: 'bar',
            toolbar: {
              show: false,
            },
          },
          plotOptions: {
            bar: {
              horizontal: false
            }
          },
          series: [{
            data: {{{ReadData Completedcalls}}}
          }]
        }

        var element = document.querySelector("#myFirstChart");
        console.log(element);
        var chart = new ApexCharts(element, options);

        chart.render();
        </script>

Answer 1

That is most likely because the charting library uses animation which isn't yet finished when the printing of the pdf is triggered.

Try to disable animation using

var options = {
  chart: {
    type: 'bar',
    toolbar: {
      show: false,
    },
    animations: {
      enabled: false
    }
  },
  ...
}

In case you get into a situation when you need to wait for some async task, you can use chrome-pdf recipe printing triggers to postpone printing.