title: ChartJS doughnut colors not showing from a Flask app. All gray
body: <p>Looking for some help here. The doughnut chart is rendering properly, but all the colors are gray. I've scoured the chartjs site and googled, but I can't seem to solve this.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>@app.route('/doughnut_chart')
  def doughnut_chart():
      values = []
      labels =['good', 'mediocre','bad']
  
      colors = ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)','rgba(102,153,51,0.1)']
  
      good_high = db.session.query(func.sum(Jf_Q1.highwellbeing)/func.sum(Jf_Q1.good_job)).\
          filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
  
      good_mod = db.session.query(func.sum(Jf_Q1.moderatewellbeing)/func.sum(Jf_Q1.good_job)).\
          filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
  
      good_low = db.session.query(func.sum(Jf_Q1.lowwellbeing)/func.sum(Jf_Q1.good_job)).\
          filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)
  
      values = [0.82483097725875845114*100,0.14935464044253226798*100,0.01966810079901659496*100]
  
      return render_template('results.html', values=values,labels=labels, colors=colors)
  </code></pre>
  
  <p>and my script code on the web page:</p>
  
  <pre><code>    new Chart(document.getElementById("doughnut-chart"), {
              type: 'doughnut',
              data: {
                  labels : {{labels | safe}},
                  backgroundColor: {{colors | safe}},
                  datasets:
                      [{ data : {{values | safe}}
                  }]
              },
              options: {
                  title: {
                      display: true,
                      text: 'Doughnut Chart Title'
                  }
              }
      });
  </code></pre>
  
  <p>Here's how it looks in Chrome's inspector:</p>
  
  <pre><code>
      new Chart(document.getElementById("doughnut-chart"), {
              type: 'doughnut',
              data: {
                  labels : ['good', 'mediocre', 'bad'],
                  backgroundColor: ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)', 'rgba(102,153,51,0.1)'],
                  datasets:
                      [{ data : [82.48309772587584, 14.935464044253226, 1.9668100799016592]
                  }]
              },
              options: {
                  title: {
                      display: true,
                      text: 'Doughnut Chart Title'
                  }
              }
      });
  </code></pre>
  
  <p>I've tried hex colors such as:</p>
  
  <pre><code>backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"]
  </code></pre>
  
  <p>But still no dice</p>
  
  <p>This is what is looks like in Chrome and in FF:</p>
  
  <p><a href="https://i.stack.imgur.com/QYiIB.png" rel="nofollow noreferrer">my chart</a></p>
  
  <p>Any assistance is greatly appreciated.</p>
  
  <p>Thanks</p>