Sankey Chart

How to Create a Basic Sankey Chart Using AMCharts

This guide demonstrates how to build a simple Sankey chart with AMCharts using sample data. You can follow these steps to understand the process and structure.

The program code will need to be updated to pull live data from your database instead of using static sample data.

This example is intended for learning purposes only.

Importing AMCharts CDN

To include AMCharts in your project, you’ll need to import the required scripts via CDN.
For a complete list of available scripts, visit the AMCharts Downloads page.

Step 1: Create a New Function in the Funcs App

1. Navigate to the Funcs app and create a new function.

2. Paste the following code snippet. The names "AM Charts 5" and "AM Charts 5 Flow" are identifiers for the scripts and can be changed if needed:

   () => do [ {dis:"AM charts 5",value:`https://cdn.amcharts.com/lib/5/index.js`}, {dis:"AM charts 5 Flow",value:`https://cdn.amcharts.com/lib/5/flow.js`} ] end

3. Save the function and click the gear icon to add the finRemoteAsset marker tag.

   Open

   

Step 2: Graphic Sankey Chart Setup

1. Open the graphic in Graphics Builder where you want to use the Sankey chart.

2. Right click on the world and go to:
   Tools > Resources > Add Remote
   Look for "AM Charts 5" and "AM Charts 5 Flow" (or the names you used in Step 2 when creating a function).

3. Then drag a Group component from the Components panel (left side).

4. Select the Group component and tag it as sankeyChart (or any name you prefer).

5. Create a new Program in the Programs panel.

6. Assign a name to the program and set the Program Target Filter to sankeyChart (the tag chosen in Step 4).

7. Click the three dots at the top right to open Variables.

8. Set this to invoke a function:

   • From the dropdown, select Custom Event

   • Enter initialize in the field.

9. Paste the following script into the program editor and save (we got the sankey code from AM Charts):

   var chartContainer = this.view am5.ready(function() { console.log("AM Charts 5 ready!") var root = am5.Root.new(chartContainer); // Create series // https://www.amcharts.com/docs/v5/charts/flow-charts/ var series = root.container.children.push(am5flow.Sankey.new(root, { sourceIdField: "from", targetIdField: "to", valueField: "value", paddingRight: 50 })); series.nodes.get("colors").set("step", 2); // Set data // https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data series.data.setAll([ { from: "A", to: "D", value: 10 }, { from: "B", to: "D", value: 8 }, { from: "B", to: "E", value: 4 }, { from: "C", to: "E", value: 3 }, { from: "D", to: "G", value: 5 }, { from: "D", to: "I", value: 2 }, { from: "D", to: "H", value: 3 }, { from: "E", to: "H", value: 6 }, { from: "G", to: "J", value: 5 }, { from: "I", to: "J", value: 1 }, { from: "H", to: "J", value: 9 } ]); series.appear(); })
   Open

   

Step 3: Preview the Chart

Go to Preview or Viewer to see your Sankey chart in action.

Open