Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Sankey Chart

A sankey chart is a visualization tool and is used to depict a flow from one set of values to another.

Connected objects are called nodes and the connections are called links.

Sankeys are used to show a many-to-many mapping between two domains or multiple paths through a set of stages.

A sankey chart is rendered within the browser using SVG or VML.

Like all Google charts, sankey charts display tooltips when the user hovers over the data.


Basic Sankey Chart

The following example shows how to draw a basic sankey chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

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

Finally add a JavaScript function:

// Load the sankey package and set a callback google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table 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 = {}; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.Sankey(document.getElementById('chart-div')); chart.draw(data, options); }


Multilevel Sankey Chart

You can create a Sankey chart with multiple levels of connections.

Sankey charts will add additional levels as needed, laying them out automatically:


Customizing Sankey Chart

Sankey charts have the ability to set custom colors for nodes and links.

Both nodes and links can be given custom color palettes using their colors options (sankey.node.colors and sankey.link.colors, respectively).

var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4']; var options = { sankey: { node: {colors: colors}, link: {colorMode: 'gradient', colors: colors} } };
Run code