How can I set the color of a specific note and/or link in a google chart sankey diagram?

Question

Here is what my data may look like:

var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]]);

What I would like in descending order of importance:

All links which start or end at a note that has "you" in its title should be one color.
All notes which have "you" in its title should be one color.
The color of #1 should depend on #2.
All notes which refer to the same store should have the same color.

To achieve that I need to set the color of the notes and links independently. Is that possible and if so how?

EDIT 1: Solution

I was hoping for a bit more direct control of the colors but I guess this is as good as it gets. The colors are actually used in a predictable way (see code) even if the notes get reordered so I can create the color array based on the data to display.

Based on WhiteHat's answer:

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU',       // 01 new node -> 1st color
       'your customers',29],          // 02 new node -> 2nd color
      ['bought first from Store1',    // 03 new node -> 3rd color
       'your customers',9],           // 04 recuring node of 02 -> 2nd color
      ['bought first from Store2',    // 05 new node -> 4th color 
       'your customers',4],           // 06 recuring node of 02 -> 2nd color
      ['bought first from Store3',    // 07 new node -> 5th color
       'your customers',8],           // 08 recuring node of 02 -> 2nd color
      ['your customers',              // 09 recuring node of 02 -> 2nd color
       'BOUGHT ONLY FROM YOU',13],    // 10 new node -> 6th color
      ['your customers',              // 11 recuring node of 02 -> 2nd color
       'bought later from Store2',9], // 12 new node -> 7th color
      ['your customers',              // 13 recuring node of 02 -> 2nd color
       'bought later from Store4',7]  // 14 new node -> 8th color
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'magenta',
            'cyan',
            'green',
            'yellow',
            'magenta',
            'green',
            'blue'
          ]
        },
        link: {
          colorMode: 'source'
        }

      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

score 2 · Accepted Answer · answered Oct 20 '16 at 12:41

2

to color one node different from the rest,

use the sankey.node.colors config option

it takes an array of color strings which will be mapped to the nodes

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'cyan',
            'cyan',
            'cyan'
          ]
        }
      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

answered Oct 20 '16 at 12:41

WhiteHat

59,912
7
51
133

hope this helps, as for coloring links, it appears only one color can be provided... – WhiteHat Oct 20 '16 at 12:43
thanks for you answer, however I am aware of that option and I'm using it already; also you can provide multiple colors for links in the same way ´link: { colors: arrayOfColors}´ (https://developers.google.com/chart/interactive/docs/gallery/sankey#controlling-colors), however this does not help me, the graph just uses one color after the other as it sees fit, I have no control what color goes where and there is no guarantee for what place a link will have in the end so getting the order of colors right in the array would be pure luck – Holly Oct 20 '16 at 13:23
`link.colors` didn't seem to work for me -- but `node.colors` should map according to row and link -- only other option would be to modify the chart manually, once the `'ready'` event fires -- [here are a few examples](http://stackoverflow.com/a/39297924/5090771) – WhiteHat Oct 20 '16 at 13:31
I considered modifying the chart manually but there is no easy way to identify the right rect for the note and the right path for the link, I could try to find the label based on its text, then look for a rect left or right of the label and so get the rect for the the start and end note of a link and then look for a link connecting to those two rects - or do you see an easier way of identifying the note-rects and links-paths? – Holly Oct 20 '16 at 13:47
the elements in the dom should follow the order of the rows in the data – WhiteHat Oct 20 '16 at 13:50
ok cool - I'll try it out later - btw thanks for posting a fully working snippet - did not know that was possible - good to know for future posts – Holly Oct 20 '16 at 13:55

How can I set the color of a specific note and/or link in a google chart sankey diagram?

1 Answers1