title: Calling a unique random value within a .forEach() loop
body: <p>I have a function that picks a random colour from an array of colours.</p>
  
  <pre class="lang-js prettyprint-override"><code>const dynamicColors = () =&gt; {
    const colors = ['#FFC100', '#FF7400', '#FF0000', '#4BBDAD', '#0C1938', '#848483'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    return randomColor;
  };
  </code></pre>
  
  <p>I am then calling this function from within a <code>.forEach()</code> loop.</p>
  
  <pre class="lang-js prettyprint-override"><code>traitInfo.forEach((t) =&gt; {
      const trait = {
        id: t.id,
        label: t.label,
        lineTension: 0.1,
        fill: false,
        backgroundColor: dynamicColors(),
        borderCapStyle: 'square',
        borderJoinStyle: 'miter',
        pointHoverRadius: 8,
        pointRadius: 4,
        pointHitRadius: 10,
        data: [],
      };
      traitDatasets.push(trait);
    });
  </code></pre>
  
  <p>I am creating a Graph and using the above technique will, of course, render two or more colours that are the same within the graph which makes for a poor UX.</p>
  
  <p>Desired output is to have <code>backgroundColor</code> display each of the colours in the array in turn. <code>traitInfo</code> will never have more than six values.</p>