Google Sankey Color Hover

1
votes

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?

2
javascriptcssgoogle-visualizationsankey-diagram
Have you tried addressing path:hover with your css? Do you have an existing example you can share in a jsfiddle? - Jason Aller
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
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
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 to add support for additional color controls. - asgallant

2 Answers

1
votes

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/

1
votes

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.