title: Adding Chart.js line chart to Jinja2/Flask html page from JS file
body: <p>I have the following code in a simple Bootstrap html file which displays a Chart.js line chart.</p>
  <pre><code>    &lt;div class=&quot;card-block chartjs&quot;&gt;
         &lt;canvas id=&quot;line-chart&quot; height=&quot;500&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The js file that contains the chart's setup looks like this:</p>
  <pre><code>$(window).on(&quot;load&quot;, function(){
  
      var ctx = $(&quot;#line-chart&quot;);
  
      var chartOptions = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
              position: 'bottom',
          },
          hover: {
              mode: 'label'
          },
          scales: {
              xAxes: [{
                  display: true,
                  gridLines: {
                      color: &quot;#f3f3f3&quot;,
                      drawTicks: false,
                  },
                  scaleLabel: {
                      display: true,
                      labelString: 'Month'
                  }
              }],
              yAxes: [{
                  display: true,
                  gridLines: {
                      color: &quot;#f3f3f3&quot;,
                      drawTicks: false,
                  },
                  scaleLabel: {
                      display: true,
                      labelString: 'Value'
                  }
              }]
          },
          title: {
              display: true,
              text: 'Chart.js Line Chart - Legend'
          }
      };
  
      var chartData = {
          labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
          datasets: [{
              label: &quot;My First dataset&quot;,
              data: [65, 59, 80, 81, 56, 55, 40],
              fill: false,
              borderDash: [5, 5],
              borderColor: &quot;#9C27B0&quot;,
              pointBorderColor: &quot;#9C27B0&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }, {
              label: &quot;My Second dataset&quot;,
              data: [28, 48, 40, 19, 86, 27, 90],
              fill: false,
              borderDash: [5, 5],
              borderColor: &quot;#00A5A8&quot;,
              pointBorderColor: &quot;#00A5A8&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }, {
              label: &quot;My Third dataset - No bezier&quot;,
              data: [45, 25, 16, 36, 67, 18, 76],
              lineTension: 0,
              fill: false,
              borderColor: &quot;#FF7D4D&quot;,
              pointBorderColor: &quot;#FF7D4D&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }]
      };
  
      var config = {
          type: 'line',
  
          options : chartOptions,
  
          data : chartData
      };
  
      var lineChart = new Chart(ctx, config);
  });
  </code></pre>
  <p>I would like to avoid using a separated javascript file and rather just have everything in my Jinja2/Flask html page. A working example can be found in <a href="https://pythonspot.com/en/flask-and-great-looking-charts-using-chart-js/" rel="nofollow noreferrer">this tutorial</a>, this is the same way that I would like to follow. I have tried to copy any paste the js part to my html page and put between <code>&lt;script&gt;</code> tags, but unfortunately it doesn't work.</p>
  <p>Here is how I tried:</p>
  <pre><code># in my jinja2/flask html page
  &lt;div class=&quot;card-body collapse in&quot;&gt;
      &lt;div class=&quot;card-block chartjs&quot;&gt;
          &lt;canvas id=&quot;line-chart&quot; height=&quot;500&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var ctx = $(&quot;#line-chart&quot;);
      var chartOptions = {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
              position: 'bottom',
          },
          hover: {
              mode: 'label'
          },
          scales: {
              xAxes: [{
                  display: true,
                  gridLines: {
                      color: &quot;#f3f3f3&quot;,
                      drawTicks: false,
                  },
                  scaleLabel: {
                      display: true,
                      labelString: 'Month'
                  }
              }],
              yAxes: [{
                  display: true,
                  gridLines: {
                      color: &quot;#f3f3f3&quot;,
                      drawTicks: false,
                  },
                  scaleLabel: {
                      display: true,
                      labelString: 'Value'
                  }
              }]
          },
          title: {
              display: true,
              text: 'Chart.js Line Chart - Legend'
          }
      };
  
      // Chart Data
      var chartData = {
          labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
          datasets: [{
              label: &quot;My First dataset&quot;,
              data: [65, 59, 80, 81, 56, 55, 40],
              fill: false,
              borderDash: [5, 5],
              borderColor: &quot;#9C27B0&quot;,
              pointBorderColor: &quot;#9C27B0&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }, {
              label: &quot;My Second dataset&quot;,
              data: [28, 48, 40, 19, 86, 27, 90],
              fill: false,
              borderDash: [5, 5],
              borderColor: &quot;#00A5A8&quot;,
              pointBorderColor: &quot;#00A5A8&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }, {
              label: &quot;My Third dataset - No bezier&quot;,
              data: [45, 25, 16, 36, 67, 18, 76],
              lineTension: 0,
              fill: false,
              borderColor: &quot;#FF7D4D&quot;,
              pointBorderColor: &quot;#FF7D4D&quot;,
              pointBackgroundColor: &quot;#FFF&quot;,
              pointBorderWidth: 2,
              pointHoverBorderWidth: 2,
              pointRadius: 4,
          }]
      };
  
      var config = {
          type: 'line',
  
          // Chart Options
          options : chartOptions,
  
          data : chartData
      };
  
      // Create the chart
      var lineChart = new Chart(ctx, config);
  });
  &lt;/script&gt;
  </code></pre>
  <p>Unfortunately I'm not so familiar with JS and don't have more ideas about what should I do to display the chart in my Flask app. What do I need to implement to make it work?</p>