Chartjs bar chart appears empty when page loads

I am using the ChartJS library to display a bar chart on my HTML page. The issue I am facing is when the page loads, it displays an empty bar chart without the data I have passed into it and without rendering the bars. After one click to the legend, the chart resizes and my labels appear on the x-axis, on the second click the bars are rendered and the y-axis populates to my passed in data. I am not sure why the chart is behaving this way.

I tested the chart with the code provided in the chart.js documentation and it appears instantly. I think the issue has to do with how I am calling my express backend to retrieve data from my endpoint.

Not sure how to resolve this issue. Any help is appreciated.

index.html:

<canvas
      id="patents-per-category-bar-chart"
      width="400"
      height="400"
    ></canvas>
<script type="text/javascript">
      var categoryLabels = [];
      var categoryValues = [];
      var centerLabels = [];
      var centerValues = [];
      $.getJSON("http://localhost:5000/api").done((data) => {

        for (let item in data.patentsPerCategory) {
          if (!data.patentsPerCategory.hasOwnProperty(item)) {
            continue;
          }
          categoryLabels.push(item);
          categoryValues.push(data.patentsPerCategory[item]);
        }

        for (let item in data.patentsPerCenter) {
          if (!data.patentsPerCenter.hasOwnProperty(item)) {
            continue;
          }
          centerLabels.push(item);
          centerValues.push(data.patentsPerCenter[item]);
        }
      });

      var ctx = document
        .getElementById("patents-per-category-bar-chart")
        .getContext("2d");
      var barChartConfig = {
        type: "bar",
        data: {
          labels: categoryLabels,
          datasets: [
            {
              backgroundColor: "blue",
              label: "# Patents Per Category",
              data: categoryValues,
            },
          ],
        },
        options: {
           legend: {
             onClick: null,
           },
          responsive: true,
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                },
              },
            ],
          },
        },
      };
      var categoryBarChart = new Chart(ctx, barChartConfig);
    </script>

mock data returned from the api:

{
  "category": {
    "health medicine and biotechnology": 37,
    "instrumentation": 38,
    "storage": 30,
    "systems": 71,
    "aeronautics": 1,
    "electronics": 47,
    "optics": 60,
    "materials": 119,
    "undefined": 3,
    "communications": 32,
    "sensors": 102,
    "robotics": 37,
    "software": 49,
    "propulsion": 9,
    "manufacturing": 40,
    "environment": 24,
    "aerospace": 79
  }
}

After returning this data from the api, I iterate over it and push the keys and values into separate arrays which are categoryLabels, categoryValues. Then pass these arrays directly into the labels and data for the chart

Created a jsFiddle: https://jsfiddle.net/tkdamxr5/1/

It works fine in the jsFiddle enviornment so the issue must be in the way I am calling my data using jQuery. Can anyone clarify how I need to call my express backend to get the data and pass it into the chart so it works correctly?

from Recent Questions - Stack Overflow https://ift.tt/3iXqX5E
https://ift.tt/eA8V8J