Color individual item

[khaivngo]

Hi, thanks for a great plugin! I was wondering whether this is possible in any way:

Is there any way to color individual item with for example a third attribute in the list or the color callback-function is able to return a saved custom attribute?

Something like this: [0: "Word",1: 6, color: "#00b2ee"] or [0: "Word",1: 6, 2: "#00b2ee"]

Or, like this: color: function (customAttribute) { return customAttribute.color; or return element.customAttribute }

[khaivngo]

Proposed a solution here: timdream/wordcloud2.js#61

[timdream]

Sorry about the late reply. I agree this feature, but I don't think each of the item should be represented as arrays anymore. How about let's do a little refactor first like this?

[ { word: 'foo', score: 6, color: '#00b2ee' }, ... ]

Please maintain compatibility with the old syntax by checking the object type, with, e.g.,

if (Array.isArray(foo)) {
  foo = { word: foo[0], score: foo[1] };
}

Thank you!

[khaivngo]

Of course, you know the code best. Do you have any estimation on when you are able to implement it?

[timdream]

Don't think I will be able to work on this anytime soon. I think you are capable of working on this and you should. Thanks for helping out!

[Pyot]

Hi, I try differently loop through the array but I can setup individual colour for a single word. I have seen in API documentation callback function but I don't understand how to apply to code. I get continuously syntax error. Is it any chance to get an example of code how to do that?

[timdream]

The code block in https://timdream.org/wordcloud2.js/#love provides the exact example.

[Pyot]

Thank you, It's working. :)

[GitFr33]

When trying to utilizes this feature I have run into some challenges.

It seems that when item is passed in to the color callback function it only contains the word and not any other of the array elements. In contrast the item works as expected when passed into the click callback.

This can be seen by editing the example configuration at https://timdream.org/wordcloud2.js/#love with the following:

color: function(item){
   console.log(item);
 },
click: function(item){
   console.log(item);
 }

The first callback logs just the word, the second one logs the array of word and number.

[raefa]

I had the same issue. In case it helps anyone, here is my workaround. Seems to do the job.

    var list = [
      ['foo', 40, '#FD0100'], 
      ['bar', 60, '#019240']
    ];
    var listColorCounter = 0;
    
    WordCloud(document.getElementById(divId), { 
      list: list,
      fontFamily: 'Open Sans, Arial, sans-serif',
      color: function () {
        return list[listColorCounter++][2];
      },
      click: function(item){
        console.log(item);
      },
      rotateRatio: 0.5,
      rotationSteps: 2,
      backgroundColor: '#FAF6EB'
    });