I am trying to draw a chart by passing values for labels and data dynamically using char.js.

The chart.js module refuses to accept the labels when passed as a variable. When I hardcode it, it works just fine. The label variable prints out the values on the page and seems to be correct in format.

Very similar to the problem described in the below query, except that I am already using a proper array.

[https://stackoverflow.com/questions/60453491/chart-js-not-showing-data-when-pass-dynamic-labels][1]

mypage.html:

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>

{{Messages.vm_size_in_use_labels}}
{{Messages.vm_size_in_use_data}}

<canvas id="chart" width="50" height="50"></canvas>

    <script lang="JavaScript">
    let ctx = document.getElementById("chart").getContext("2d");

    let chart = new Chart(ctx, {
      type: "pie",
      data: {
         labels: {{Messages.vm_size_in_use_labels}},
         datasets: [
            {
              label: "Gross volume ($)",
              backgroundColor: "#79AEC8",
              borderColor: "#417690",
              data:   {{Messages.vm_size_in_use_data}},
            }
         ]
      },
      options: {
         title: {
            text: "Gross Volume in 2020",
            display: true
         }
      }
    });
    </script>

The page shows the printed value correctly but chart doesn't display:

['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'] 
[3, 3, 1, 1] 

If I change the label to hard values,

         labels: ['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'],

this works just fine and chart is displayed.

Not sure what is missing here. the framework is django if it matters.