IN THIS ARTICLE

    IN THIS ARTICLE

      Sankey

      This comprehensive guide will cover everything you need to know about the Sankey element in Mokkup.

      When to Use?

      A Sankey chart is best used to visualize the flow of resources, data, or energy between stages, helping to illustrate how quantities split, merge, or change across a process. Here’s when to use a Sankey chart:

      • When tracking the distribution of resources or energy from sources to destinations, such as budget allocations, energy flows, or supply chains.
      • When illustrating relationships or connections between different categories, highlighting paths, bottlenecks, or proportional flows.
      • When you want to make complex systems easier to understand, particularly if the process involves multiple inputs and outputs.

      How to Create?

      There are two ways to use the Sankey chart in Mokkup.

      Create New

      • Click on ‘Create New Project’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the Sankey onto the canvas or click on it to add from the left menu
      • Resize it on the canvas and place it in the desired location
      • Edit it from the customize element menu, which opens on the element selection

      Using a Mokkup Template

      • Choose a template from the template library that uses a Sankey and click ‘Use Template’
      • Select the Sankey element that needs modification
      • Resize it on the canvas or edit it from the customize element menu

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Mokkup provides customization options for every element. These customization options are accessible via the left-hand navigation menu. The customizable options are separated into two categories: Data and Customize. 

      Data

      Anything related to the data populated in the chart or the chart type can be found here.

      Edit Data

      • Edit the pre-populated data on the dataset table (Source, Target, and Value columns), and the chart will reflect the new data. Click on ‘+’ ‘-’ to add/remove any additional dataset.

      Mokkup provides customization options for every element. These customization options are accessible via the left-hand navigation menu. 

      Customize: 

      This is the section that opens by default when an element is selected. In this tab, all element customizations can be made. Each subsection is explained in detail below.

      1. Details

      Edit the basic chart details here.

      Title:

      Choose to show or hide title of the chart here. Toggle off if you do not need to have a title.

      Edit Text:

      Change the title text from here. Click the 'Aa' icon next to the title field to open the element's Text Theme and style the title's font, size, style, alignment, and color.

      Text:

      Toggle on to add a line of supporting text below the title, and enter the content in the 'Text' field. Toggle off if not needed.

      2. Properties

      Contains all the settings that affect the chart's aesthetics. Use the dropdown to select which dataset to apply the properties to.

      Data Labels:

      • Add or remove data labels from the chart by toggling on or off.
      • Change the position in which they appear by selecting one of the options in the ‘Position’ drop-down.

      Data Link Labels:

      • Toggle on or off to add or remove data link labels in the chart. 

      Node Width:

      • Use the slider to adjust the node width of the columns in the chart.

      3. Add-Ons

      Contains additional elements that can be added to the chart.

      Buttons: 

      • Switch on or off to add or remove buttons from the chart. 
      • Add multiple buttons by clicking ‘Add Button’. 
      • Edit the button's content by clicking on the ‘Title 1’ text in this menu. 
      • Delete any button by clicking the ‘trash’ icon near the name of the button. 

      Dropdowns: 

      • Toggle on or off to add or remove dropdowns in the chart. 
      • Add dropdowns by clicking the ‘+’ icon.
      • Reorder them by clicking the ‘Settings’ icon.
      • Delete them by clicking the ‘Trash’ icon. 
      • The title can be edited in the ‘Edit Text’ field, and values can be added by entering values in the ‘Add Values’ field. 

      KPIs: 

      • Toggle on or off to add or remove KPIs from the chart. 
      • Add KPIs by clicking the ‘+’ icon.
      • Reorder them by clicking the ‘Arrow’ icon
      • Delete them by clicking the ‘Trash’ icon. 
      • The title can be edited in the ‘Edit Text’ field, and values can be edited in the ‘Measured Value’ and ‘Percentage Change’ fields. 

      Tip: Some add-ons cannot be used together in an element. For example, turning on the buttons toggle will automatically switch off dropdowns, and vice versa.

      4. Variations

      • This button opens the 'Choose Style' pop-up. 
      • Choose an alternative design for the element, and click on apply.
      • Can also access the pop-up by double-clicking on any selected element.
      • Using the above-described customization methods, it is also possible to create various element variants.
      • Click on the "Default" option to revert to the original variation of the element in case you've selected a different one and want to go back to the default.

      5. Theme & Customization

      Click the ‘Theme & Customization’ icon in the floating toolbar (or open it by scrolling down the left side menu and clicking Element Color Theme, Element Text, or Element Effects) to style this Sankey on its own, without changing the rest of the dashboard.

      Element Color Theme

      Choose a Primary, Secondary, or Tertiary color theme (under the Main and Contrast tabs) to recolor the Sankey’s nodes and flow links. For more information, see Mokkup Themes.

      Element Text Theme

      Style each text item on the Sankey individually. Select an item from the ‘Item Name’ dropdown (Title, Text, and Data Labels, plus any Add-Ons in use (Buttons, Dropdowns, KPIs, Title, Measured Value, Compared Value, Percentage Change, or Others), then set its Font, Size, Style (Bold/Italic/Underline), Alignment, and Color. Click ‘Reset to Default’ to undo changes to that item. For more information, see Text Themes.

      Effects Theme

      Add Rounded Corners, set Padding (inner and outer, independently for the Left, Top, Right, and Bottom sides), change the Element Color (background), and add a Drop Shadow or Stroke to the Sankey. For more information, see Effects Theme.

      Whichever change you make most recently is the one that sticks. For example, if you customize an element's effects and then apply a new project-level Effects Theme, the project theme overrides that element's custom styling, and the reverse holds too.

      This was an in-depth introduction to using and editing a Mokkup sankey element. For additional inquiries, please ask our Chatbot or contact support.

      Similar articles