Google Sankey Color Hover

Question

Using this API: https://developers.google.com/chart/interactive/docs/gallery/sankey

I am wanting to make a Sankey diagram. Is there any way to change the color of the links when the mouse is hovering over them without affecting the other links? So, by default they would be gray and then when a link is being hovered over by the mouse, that individual link would turn blue and the others would stay gray?

Have you tried addressing `path:hover` with your css? Do you have an existing example you can share in a [jsfiddle](http://jsfiddle.net/)? — Jason Aller, Apr 02 '14 at 23:43
The code that I'm using contains data that I'm using for research so I can't necessarily put it on jsfiddle to share, however the code is the same as the multi-level example on the provided site, just with more numbers plugged in. And I currently have no CSS, but can I refer to the links in CSS with "path"? — Bloo, Apr 02 '14 at 23:52
For purposes of the jsfiddle you could just use some random data. I haven't checked yet how Google charts handle browsers that can't process svg files, but the chart at the link you provided is a svg (scalable vector graphics) file and the `path:hover` should work when the chart is rendered as an svg. — Jason Aller, Apr 03 '14 at 01:10
The API doesn't support what you want (though you can get half-way there it with the CSS trick @JasonAller suggested). I would suggest making a [feature request](http://code.google.com/p/google-visualization-api-issues/issues/list) to add support for additional color controls. — asgallant, Apr 03 '14 at 15:45

Jason Aller · Accepted Answer · 2018-06-08T23:02:51.787

For those browsers that support svg the following css will enable a hover behavior for the chart:

svg path:hover {
    fill: red;
}

google.setOnLoadCallback(drawChart);

function drawChart() {
  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],
  ]);

  // Set chart options
  var options = {
    width: 600,
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
  chart.draw(data, options);
}

svg path:hover {
  fill: red;
}

<html>

<head>
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">
  </script>
</head>

<body>
  <div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>

</html>

This uses the same :hover that is used by other css and addresses the path elements in the svg and uses a svg attribute for fill combined with the color of your choice. If the chart were more complex (had other path elements we didn't want to add :hover to we'd have to make the selector more specific.

This version uses some other jsfiddle features to separate out code and content: http://jsfiddle.net/Q7rNs/2/ — Jason Aller, Apr 03 '14 at 03:45
Thank you so much! Do you know if there's anyway to apply this effect to all the links attached to a node when you hover over a particular node? — Bloo, Apr 04 '14 at 03:28
Looking over the structure of the svg they use I don't see a way to do it with just css, but it might be possible with JavaScript. If you have requirements along those lines you might want to look into [d3.js](http://d3js.org/) which can also do [Sankey diagrams](http://bost.ocks.org/mike/sankey/) and has a lot of support for making diagrams interactive. — Jason Aller, Apr 04 '14 at 03:39

score 1 · Answer 2 · answered Mar 13 '15 at 12:35

1

If you want to highlight all the paths from a selected end, you can try this:

svg path:not([fill-opacity])
    {
         fill: red;
    }

this will paint red all the paths that normally are at full opacity, that is the highlighted ones. expanding the jsfiddle by Jason Aller, the effect is here: http://jsfiddle.net/6bfpcv9g/

answered Mar 13 '15 at 12:35

pomarc

2,194
3
23
30

Thanks, but I finished that project a year ago. – Bloo Mar 18 '15 at 02:30
someone could use it anyway, that's the spirit of stackexchange, imho. – pomarc Mar 18 '15 at 07:42
Not sure I understand what this does, also the fiddle just shows the `hover` CSS. I want something that can fade out other links, any idea on how I can do this? – Gerard Aug 18 '16 at 09:04

Google Sankey Color Hover

2 Answers2