title: Iterate over an array in Javascript to Populate a Chart.js graph
body: <p>I have to do a stacked graph, and so far when I used the stacked option in JS, the data is not really stacked, but rather overlayed:</p>
  <p><a href="https://i.stack.imgur.com/A0ACg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A0ACg.png" alt="enter image description here" /></a></p>
  <p>what I mean is that the values are not on top of each other adding to a total amount</p>
  <p>Does anyone know how to achieve this?, I can see that from the example in the Chart.js documentation, the stacked bar is created by having an individual value in the data section, so how can you do that using javascript?, I tried a for loop but it didn't work.</p>
  <p>plot_forecast.js</p>
  <pre><code> const data = {
              labels: xlabel,
              datasets: [
              {
              data:ydata,
              backgroundColor: ['rgba(255, 99, 132, 0.2)'],
              borderColor: ['rgba(255, 99, 132, 1)'],
              borderWidth: 1
              }
              ]
   };
  
  // Config Block
  const config = {
      type: 'bar',
      data,
      options: {
           scales: {
               x: {
                  type:'time',
                  time: {
                      unit:'month'
                  },
                  stacked:true,
               },
               y: {
                    beginAtZero: true,
                    stacked:true,
               },
           },
  
          }
  };
  // Render (initialization block)
      const myChart = new Chart(
          document.getElementById('myChart'),
          config
      );
  
  </code></pre>
  <p>Sales_forecast.html</p>
  <pre><code>{% extends &quot;base.html&quot; %}
  {% load crispy_forms_tags %}
  {% load static %}
  {% block title %}Edit your account{% endblock %}
  
  {% block content %}
    &lt;h1&gt;Sales Forecast&lt;/h1&gt;
  
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;div class=&quot;card&quot; &gt;
       &lt;div class=&quot;card-body&quot;&gt;
              &lt;h2&gt; Monthly Forecast&lt;/h2&gt;
              &lt;hr&gt;
              &lt;canvas id=&quot;myChart&quot; &gt;&lt;/canvas&gt;
            &lt;/div&gt;
            &lt;br&gt;
              &lt;div class=&quot;col-sm-4&quot;&gt;
                 &lt;div class=&quot;row justify-content-center&quot;&gt;
                  &lt;p&gt;Start Date:&lt;/p&gt;
                  &lt;input onchange=&quot;filterData()&quot; type=&quot;month&quot; id=&quot;startdate&quot;&gt;
                 &lt;/div&gt;
                &lt;br&gt;
                &lt;div class=&quot;row justify-content-center&quot;&gt;
                  &lt;p&gt;End Date:&lt;/p&gt;
                  &lt;input onchange=&quot;filterData()&quot; type=&quot;month&quot; id=&quot;enddate&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
         &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;div class=&quot;card&quot; &gt;
       &lt;div class=&quot;card-body&quot;&gt;
              &lt;h2&gt; Cummulative Plot &lt;/h2&gt;
              &lt;hr&gt;
              &lt;canvas id=&quot;ChartLine&quot;&gt;&lt;/canvas&gt;
            &lt;/div&gt;
            &lt;hr&gt;
              &lt;div class=&quot;col-sm-4&quot;&gt;
                 &lt;div class=&quot;row justify-content-center&quot;&gt;
                  &lt;p&gt;Start Date:&lt;/p&gt;
                  &lt;input onchange=&quot;filterData()&quot; type=&quot;month&quot; id=&quot;startdate_1&quot;&gt;
                 &lt;/div&gt;
                &lt;br&gt;
                &lt;div class=&quot;row justify-content-center&quot;&gt;
                  &lt;p&gt;End Date: &lt;/p&gt;
                  &lt;input onchange=&quot;filterData()&quot; type=&quot;month&quot; id=&quot;enddate_2&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  
    &lt;script&gt;
      // Defining Variables
      var xlabel = {{ x|safe }};
      var ydata = {{ y|safe }};
      var label = {{ label|safe }};
  
  
      var xlabel_line = {{ x|safe }};
      var ydata_line = {{ y|safe }};
  
    &lt;/script&gt;
  
    &lt;script type=&quot;text/javascript&quot; src='{% static &quot;js/plot_forecast.js&quot; %}'&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src='{% static &quot;js/chart_line.js&quot; %}'&gt;&lt;/script&gt;
  {% endblock %}
  
  </code></pre>