Currently, I am in the process of creating a Sankey diagram using Google charts.
As of now, I have implemented the following CSS:
svg path:hover {
fill: red;
}
However, I have noticed that this code only changes the color of the links when hovering over them. If you hover over a node, the links highlight but not in the specified red color. My aim is to have the links connected to the node change to a more contrasting color when the node is hovered over.
I also tried adding the following code:
sankey: {
node: { interactivity:true,}
}
While this did provide some improvement, I still feel the need for greater contrast.
google.charts.load('current', {'packages':['sankey']});
google.charts.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 ]
]);
var options = {
width: 600,
sankey: {
node: { interactivity:true,}
}
};
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
svg path:hover {
fill:red;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>