How do I use my chart.js line chart with handlebars?

Issue

I'm learning Handlebars and now trying to implement a line chart from chartjs library with handlebar but I am unable to figure out also there's no tutorial or guide for this topic. Here is my code if I try this without handlebars and static data it works but with handlebars it's not even showing my line chart.

This is my template.html

<script id="lineChart" type="text/x-handlebars-template">
<div class="row">
  <div class="col-sm-12 col-md-2"> </div>
    <div class="col-sm-12 col-md-8"> 
      <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  </div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var lineChart = new Chart(ctx, {
   type: 'line',
   data: {
      labels:  {{chartData.Date}} //["08/05/2020", "08/06/2020", "08/07/2020", "08/08/2020"],
      datasets: [
        {
          label: "Order Amount",
          fill: false,
          lineTension: 0,
          borderColor: "#0d6efd",
          data:  {{chartData.Data}}  //[1500,2100, 3580, 2800],
        }
      ]
   } 
});
</script>
</script>

This is handlebars app.js

const chartData = {
    Dates:["05/08/2020", "05/09/2020", "05/10/2020"],
    Data: [1500, 1200, 1750]
};

let lineChart = $('#lineChart').html();
let lineChartScript = Handlebars.compile(lineChart);
let linehtml = lineChartScript(chartData);
$(document.body).append(linehtml);

Solution

const chartData = {
    Dates:["05/08/2020", "05/09/2020", "05/10/2020"],
    Data: [1500, 1200, 1750]
};

let lineChart = $('#lineChart').html();
let lineChartScript = Handlebars.compile(lineChart);
let linehtml = lineChartScript(chartData);
$(document.body).append(linehtml);

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels:  chartData.Dates, 
      datasets: [
        {
          label: "Order Amount",
          fill: false,
          lineTension: 0,
          borderColor: "#0d6efd",
          data:  [chartData.Data] 
        }
      ]
   } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>


<script id="lineChart" type="text/x-handlebars-template">

<div class="row">
  <div class="col-sm-12 col-md-2"> </div>
    <div class="col-sm-12 col-md-8"> 
      <canvas id="myChart" width="400" height="400"></canvas>
  </div>
  </div>
  </div>

</script>

Answered By - Alan Omar