How to add a Sankey Chart Widget in Bold BI?
Bold BI allows you to add a variety of widgets to your dashboard, including the Sankey chart widget. This widget is a type of flow diagram where the width of the arrows is proportional to the flow quantity. Here’s how you can add a Sankey chart widget to your Bold BI dashboard. Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages.
We have developed a custom Sankey widget utilizing the third-party library Apache ECharts. Apache ECharts is an open-source data visualization library written in JavaScript, enabling the creation of customizable and interactive charts and graphs for web applications. To use this custom widget you should agree with the license https://github.com/apache/echarts/blob/master/LICENSE
Step 1: Download the Sankey Chart Custom Widget: First, you need to download the Sankey Chart custom widget. You can do this by using the provided download link.
Step 2: Publish the Custom Widget to Bold BI: After downloading the widget, you need to publish it to the Bold BI application. This will make the widget available for use in your dashboards. You can find a detailed guide on how to publish custom widgets here.
Step 3: Find the Sankey Chart Widget: Once you have downloaded the widget, you can find it in the Miscellaneous section of your Bold BI dashboard.
Step 4: Drag and Drop the Widget: Next, drag and drop the Sankey chart widget into the design canvas of your dashboard.
Step 5: Configure the Data: Finally, you need to configure the data into the widget’s assign data section. Once you have done this, the widget will be rendered on your dashboard.
And that’s it! You have successfully added a Sankey chart widget to your Bold BI dashboard.
Additional Configuration Options
The Sankey Chart widget includes additional options to improve data label readability when working with large datasets.
Enable Label Density Control
When a large number of nodes are displayed, data labels may overlap due to limited widget space. To address this, enable the Label Density Control property.
After enabling this option, configure the Label Interval property to control how frequently labels are displayed.
For example:
- Label Interval = 1 → Displays all labels.
- Label Interval = 2 → Displays every second label.
- Label Interval = 3 → Displays every third label.
This helps reduce visual clutter and improves readability without affecting the underlying Sankey relationships, links, or interactions.
Data Label Text Mode
The Data Label Text Mode property controls how lengthy labels are displayed within the widget.
Supported modes:
Wrap
Displays the complete label by wrapping the text into multiple lines.
This mode is useful when preserving the full label text is important.
Ellipsis
Truncates lengthy labels and displays an ellipsis (…) when the available space is insufficient.
This mode is useful when maintaining a clean and compact visualization layout.
By combining Label Density Control, Label Interval, and Data Label Text Mode, users can effectively visualize Sankey diagrams containing large volumes of data while maintaining label readability and minimizing overlap.