Chartjs-How to get multiple elements on a page using flask (tables, pie charts, etc.)

That error is because your zip object has 7 values to unpack, not 3.
If you did {% for a, b, c, d, e, f, g in set %} it should work.

You could also arrange your data like a list of dicts instead, something like:

[{"item": ..., "label": ..., "color": ..., "value": ...}, ...]

that way, you could render them like this (without worrying if you have more keys and you don’t wanna render them all):

{% for i in set %}
  {
     value: "{{ i["item"] }}",
     label: "{{ i["label"] }}",
     color: "{{ i["color"] }}"
  },
{% endfor %}

I was able to accomplish this by setting 3 different variables for each graph as ‘set’ was a key argument and was not able to be replicated. Here is the code I used:

Python:

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set1=zip(values_1, labels_1, colors),
                                title4='Produce Sold on Tuesday', set2=zip(values_2, labels_2, colors),
                                title5='Produce Sold on Wednesday', set3=zip(values_3, labels_3, colors))


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

HTML:

  <center>
    <h1>Produce Solde Breakdown</h1>
  </center>
  <center>
    <h2>{{ title3 }}</h2>
    <canvas id="chart1" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set1 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart1").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart1").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title4 }}</h2>
    <canvas id="chart2" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set2 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart2").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart2").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title5 }}</h2>
    <canvas id="chart3" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set3 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart3").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart3").getContext("2d")).Pie(pieData);
    </script>