How can i change the HEX values of color dynamically inside a for loop?

Question

I am using a map template in js file where i want to seperate the states of countries by giving them different background colors.

below is a snippet of my js file code-

for (let i = 1; i < array.length; i++) {
      var tooltip = { text :`${array[i].state} `+` ${array[i].confirmed}`};
      var lable = {
                    visible:true
                  }
        my_data[array[i].statecode] = { tooltip:tooltip, lable:lable, backgroundColor:"#ff5722"};
    }

i want to use unique backgroundColor for each state.

Answer 1

You can generate a random color for each like this:

for (let i = 1; i < array.length; i++) {
      var tooltip = { text :`${array[i].state} `+` ${array[i].confirmed}`};
      var lable = {
                    visible:true
                  }
        my_data[array[i].statecode] = { tooltip:tooltip, lable:lable, backgroundColor: '#' + Math.floor(Math.random() * 16777215).toString(16)};
    }