Google Charts Sankey - Node Text Style

Is there a way to change the color of the target node text with style role in Google's Sankey diagram? Currently I have data setup like this: [Source, Target, Label, Style] [A,B,'

Solution 1:

couldn't find a way to style individual Node text using standard options

but the color can be set manually, after the chart is drawn

normally, the chart's 'ready' event can be used to know when the chart has finished drawing, however, the chart will revert back to the default Node text style on every interactive event, such as 'onmouseover', 'onmouseout', & 'select'

instead, use a mutation observer to change the Node text on any interactivity

see following working snippet, which maps a color to each Node text...

google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);

functiondrawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    ['A', 'X', 5],
    ['A', 'Y', 7],
    ['A', 'Z', 6],
    ['B', 'X', 2],
    ['B', 'Y', 9],
    ['B', 'Z', 4]
  ]);

  var options = {
    width: 600
  };

  var colorMap = {
    'A': 'cyan',
    'X': 'magenta',
    'Y': 'yellow',
    'Z': 'lime',
    'B': 'violet'
  };

  var chartDiv = document.getElementById('sankey_basic');
  var chart = new google.visualization.Sankey(chartDiv);

  var observer = newMutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.tagName === 'text') {
          node.setAttribute('font-size', '20');
          node.setAttribute('fill', colorMap[node.innerHTML]);
        }
      });
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="sankey_basic"></div>