Nested looping to return array of colors dependent on length of array of values

Question

I am trying to return an array of colors dependant on the number of values I have in a seperate array. For example I have an array of values [1, 5, 12, 23, 33, 76, 100, 354, 123], values.length = 9. My array of colors has 8 entries, therefore my array of colors should continue to loop until it reaches 9 entries. The below bar chart is what I want to achieve, the chart may have 100 entries therefor the colors would continue to loop until they reach 100 entries. The below works with the following code however this is returning 9*8 entries in the console.log as im looping over each value and pushing in the colors array. The result should be a single colors array of 9 entries. Appreciate any help.

const barColors = () => {
  const colorsArr = [];
  // const colorsArr = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];
  const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

  values.forEach(() =>
    colorsArr.push(
      'rgba(3, 4, 94, 1)',
      'rgba(3, 4, 94, .8)',
      'rgba(3, 4, 94, .6)',
      'rgba(3, 4, 94, .4)',
      'rgba(3, 4, 94, .2)',
      'rgba(3, 4, 94, .4)',
      'rgba(3, 4, 94, .6)',
      'rgba(3, 4, 94, .8)'
    )
  );
  console.log(colorsArr);
  return colorsArr;
};

For each value you are pushing the same eight colors to the colors array. This is clearly not what you want. You need to have an array of predefined colors, let's name it a palette, and push them to the colors array until the colors array is as long as the values array. — user1984
– user1984, Commented Aug 21, 2021 at 21:58
Not enough information. What is the desired behaviour? If the colorsArr hardcoded or dynamic? What's its relationship with values? Do you expect for each value to correspond to one single color with different alpha or completely different palette? — yqlim
– yqlim, Commented Aug 21, 2021 at 22:19

user1984 · Accepted Answer · 2021-08-21 22:13:58Z

1

const barColors = () => {
  const palette = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];
  const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

  const colorsArr = []
  for (let i = 0; i < values.length; i++) {
    colorsArr.push(palette[i%palette.length])
  }
  console.log(colorsArr)
  return colorsArr
}

The only part that may need explanation is palette[i%palette.length]. This is to avoid going over the length of palette. If the are more values than colors in palette, it will start from index 0 of palette to add do colors.

edited Aug 21, 2021 at 22:13

answered Aug 21, 2021 at 22:04

user1984

6,9383 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ghatzi Over a year ago

This is perfect, thank you so much. I had attempted to use the for loop but had no idea about the [i%palette.length] part. Thanks again

barzin.A · Accepted Answer · 2021-08-21 22:25:37Z

1

If I understand well, you want the 9th element of values to get the first color again.

const colorsArr = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];

const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

values.forEach((element, index) =>
  $("#chart").append("<div><span>" + colorsArr[index % colorsArr.length] + "</span><div style='background-color: " + colorsArr[index % colorsArr.length] + "; width:" + element + "px; height:20px; margin:2px'></div></div>")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

answered Aug 21, 2021 at 22:25

barzin.A

1,5822 gold badges12 silver badges20 bronze badges

Collectives™ on Stack Overflow

Nested looping to return array of colors dependent on length of array of values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related