Network graph

Visualize entities as nodes and links to explore relationships, configure layouts and styling, and build interactive dashboards powered by flexible, field-based data sources.

Use a network graph to visualize entities and the relationships between them. A network graph represents each entity as a node with links (lines, arrows (unidirectional or bidirectional), or pairs of arrows) representing the relationships between nodes. Network graphs are suitable for use cases like computer network diagrams, organizational charts, and supply chain diagrams.

A network graph using left-right hierarchical layout and dynamic link coloring.

Data formatting

Use network graphs to display relationships between nodes as a directed graph. Each row in the dataset represents a link between 2 nodes. Nodes are inferred from the source field. Use a transforming command to shape your data. You can use the table command with the following syntax:
CODE 
... | table <source_field> [<target_field>] [<nodeText_field>] [<nodeTypes_field>] [<nodeValues_field>] [<nodeColors_field>] [<nodeIcons_field>] [<nodeIconColors_field>] <nodeSize_field>| [<linkColors_field>] [<linkValues_field>] | [<linkWidths_field>] |[<xPositions_field>] | [<yPositions_field>]
Field Required or optional Description
<source_field> Required Specify the array of node IDs that links start from.
<target_field> Optional Specify the array of node IDs that links go to.
<xPositions_field> Required for Preset layout When using preset layout, specify the x position for each node.
<yPositions_field> When using preset layout, specify the x position for each node.
<nodeText_field> Optional Specify the text to display under each node in the nodeIds array.
<nodeTypes_field> Specify the node type for each node in the nodeIds array. Needed for clustering when layout is force.
<nodeValues_field> Specify the node value for each node in the nodeIds array.
<nodeColors_field> Specify the color used for nodes.
<nodeIcons_field> Specify the icon used for each node.
<nodeIconColors_field> Specify the color used for each node icon.
<nodeSize_field> Specify an array of numbers for custom diameters (8px - 200px).
<linkColors_field> Specify the color used for links.
<linkValues_field> Specify a numeric value for each link.
<linkWidths_field> Specify an array of numbers for custom width per link.
<nodeColorValues_field> Specify the array of values used for dynamic node coloring.
<linkColorValues_field> Specify the array of values used for dynamic link coloring.
<nodeIconColorValues_field> Specify the array of values used for dynamic node icon coloring.

Generate a network graph

  1. Select the Add chart button ( The Add Chart button in the editing toolbar. ) in the editing toolbar and browse through the available charts. Choose the network graph.
  2. Set up a new data source by selecting + Create search and adding a search to the SPL query window or select an existing data source under the Search, Saved search, or Chain search sections. See Example: Network graph in hierarchical layout for an example of an SPL query that powers a network graph.

  3. Continue to configure your network graph using the options described.

Configuration panel options for network graphs

Title

Give your visualization a name. The title name is also helpful when searching for individual visualizations in the dashboard definitions and is not the same as the automatically assigned unique ID.

Description

Give your visualization a description to explain what the user is viewing.

Data sources

You can choose one of the following data options:

  • An existing data source or create a new data source
  • A chain search
  • A saved search

To power a network graph, a data source must return at least 2 fields to act as the source (nodes that links start from) and target (nodes that links go to). You can also add additional optional fields.

Note: Configuring secondary node source data source fields using the Set up nodesource data source option is currently not supported. Fields from the secondary data source do not appear for selection in the node data fields, such as Node labels. As a work around, you can do one of the following:
  • Include the node source data in the primary data source with the other network data.

  • Configure the node data fields in the source code

If nodeIds is not defined, the source field is used by default.

See Example: Network graph using multiple data sources for an example of using multiple data sources.

Visibility

Position and size

In absolute layout, you can use your mouse to change the size of the panel, or the Position and size section of the Configuration panel for pixel perfect sizing and placement.

Data configurations

  • Source: specify the field to use as the source node data (nodes that links start from).

  • Target: specify the field to use as the target node data (nodes that links go to).

  • Node labels: specify the field to use as the node labels. By default this is the same field used for the Source field.

  • Node values: specify field to use for the node value for each node.

  • Tooltip header field: specify the field to add to the tooltip header. Tooltips appear when you hover over nodes. Only the value of this field for the node displays as the header.

  • Tooltip node fields: specify the fields to add to the tooltips. Tooltips appear when you hover over nodes. These fields and their corresponding values display for each node in its tooltip.

  • Result limit: specify the maximum number of link data points rendered (hard limit 10,000).

Note: You cannot specify the field to use as the node icon data in the UI. You must configure it using the nodeIcons option in the source code editor.

Data display

  • Layout: specify the layout used for the graph. Choose one of the following:

    • Grid: arrange nodes in a grid layout. In the Grid columns field, specify the number of nodes to display per row. Specify the horizontal and vertical padding between nodes.

    • Preset: use predefined positions for nodes by specifying the x and y positions for each node in your network. The preset layout allows precise control over the graph's appearance. Specify the x and y positions by selecting a data source field from the respective dropdowns.

    • Hierarchical: automatically arrange nodes into a vertical or horizontal hierarchy based on the node positions and links. A hierarchical layout is helpful for quickly identifying hierarchies and dependencies in the network. Specify the hierarchy direction and the horizontal and vertical padding between nodes.

    • Force: arrange nodes using a physics-based algorithm. You can cluster certain nodes together. A force layout is suitable for graphs with a large number of nodes that are highly connected, dense, and/or non-hierarchical. You can configure a force layout using the following options:

      • Charge strength: specify the strength of the charge between nodes. Positive value is attraction and negative value is repulsion.

      • Charge theta: specify the Barnes-Hut approximation parameter. Higher value means faster performance but less predictable node positioning.

      • Charge distance minimum and Charge distance maximum: specify the maximum and minimum distances over which to apply the charge force.

      • Collider padding: specify the additional distance around each node which the collider uses for node repulsion. When clustering is on, this value is used to increase collision distance for clusters.

      • Collider strength: specify the strength of the collider used for node repulsion. A higher value results in stronger repulsion, causing nodes to spread out more. Entering a value between 0 - 1 is best practice, but there is no hard limit.

      • Node cluster types: specify the data source field to use to specify the node type for each node in the array of node IDs.

      • Cluster strength: specify the strength of the clustering force between nodes of the same type. A higher value results in stronger clustering, causing nodes of the same type to be positioned closer together. Value is between 0 and 1.

      • Link distance: specify the ideal distance between linked nodes. A higher value results in more space between linked nodes.

      • Link strength: specify the strength of the spring force between linked nodes. Higher value makes link lengths closer to the Link Distance value.

  • Link direction: specify the directionality of the links (bi-direction, one-way, or no directionality).

  • Link connection style: specify the link shape (straight, c, s, or z).

  • Link port preference: specify the preferred port alignment for S and Z links (horizontal, vertical, or none).

  • Show zoom controls: specify whether to show zoom controls on the graph.

Color and style

  • Title color: configure a font color for the visualization title.

  • Description color: configure a font color for the visualization description.

  • Background color: specify the color for the visualization background.

  • Node color data, Node icon color, and Link color: for each of these options, configure one of the following:

    • To select a specific color for all nodes, node icons, or links, select Static coloring from the dropdown, then specify the desired color.

    • To configure dynamic coloring for nodes, node icons, or links, select Dynamic coloring from the dropdown. From the Node color data, Node icon color data, or Link color data dropdown, select the desired field to use for dynamic coloring. Click in the palette to bring up the formatting menu window. You can do the following with the dynamic coloring formatting menu:

      • Select Gradient, Ranges, or Matches for the match method:

        • Color by Gradient to assign colors based on the highest value and lowest value. You can specify multiple stops within the gradient.

        • Color by Ranges to assign colors based on numeric ranges (e.g., values less than 25 are red, between 25 and 50 are orange, between 50 and 75 are yellow, and 75 or higher are green). Specify 2-7 color ranges using the UI. You can add an unlimited number of color ranges using the source editor.

        • Color by Matches to assign colors to specific values.

          • Use the asterisk (*) character as a wildcard in match values to represent any number of characters in a string. You can place an asterisk anywhere within the string. Matching prioritizes exact values, followed by values with more common characters. If multiple match values share the same length and number of wildcards, they will be matched according to their order of entry.
      • See Modify and write dynamic options syntax for more examples on using dynamic coloring.
      • Choose between dark and light colors, depending on which works best for your dashboard theme.
      • Select the color grid to choose from the preset palettes. You can also customize the color of the ranges or values you specify. If you don't use a preset color palette, specify the color you want by selecting the color box next to the range and adding a hexadecimal color.

Interactions

Select + Add interaction to set up different visualization interactions such as linking to a custom URL, setting tokens, or linking to a report. For more details, see Add dashboard interactions.

Source code

Select your visualization or its search to view and edit the source code in real-time. You can also change the Visualization ID to a more readable ID to help identify this visualization in the source code.

Example: Network graph in hierarchical layout

The following shows a dashboard with a network graph titled "Splunk Data Pipeline & Infrastructure Topology". The dashboard also includes a table which shows the same data as the network graph for reference.

This example network graph has the following settings:

  • Left to right hierarchical layout

  • Static node and node icon coloring

  • Dynamic link coloring. Links with a value of 80 and higher are green, while those with a value lower than 80 are red.

  • Z-shaped bidirectional links

A dashboard with a network graph titled "Splunk Data Pipeline & Infrastructure Topology" and a table showing the same information.

The following provides the source code for the data source that powers the example network diagram and table:

CODE 
| makeresults
| eval 
    source="users,hec,hec,cms,cms,indexServer,indexServer,indexServer,indexServer,indexServer,gcp,amazonS3,azure,searchHead,searchHead,searchHead,dashViz,weeklyReport,observability",
    target="hec,indexServer,cms,hec,observability,gcp,amazonS3,azure,searchHead,observability,indexServer,indexServer,indexServer,indexServer,weeklyReport,dashViz,,,indexServer",

nodeTexts="Users,HEC,HEC,CMS,CMS,Index Server,Index Server,Index Server,Index Server,Index Server,GCP,Amazon S3,Azure,Search Head,Search Head,Search Head,Dashboard Visualization,Weekly Report,Observability",
    type="user,code,code,code,code,server,server,server,server,server,database,database,database,search,search,search,viz,viz,viz",
    nodeColors="#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF",
    nodeIcons="portrait,cylinder,cylinder,cylinder,cylinder,servers,servers,servers,servers,servers,cylinder,cylinder,cylinder,driveMagnifier,driveMagnifier,driveMagnifier,file,file,file",
    nodeIconColors="#FFFFFF,#808080,#808080,#FFFFFF,#FFFFFF,#808080,#808080,#808080,#808080,#808080,#33fbff,#33fbff,#33fbff,#FFC000,#FFC000,#FFC000,#FFFFFF,#FFFFFF,#FFFFFF",
    linkColors="#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF",

linkValues="872.41,3,3,3,3,600,1,1,1,1,100,600,1,1,1,1,2,2,0",

nodeValues="30,300,3,3,3,10,1,1,1,1,1,1,1,1,1,1,2,2,0",

row_index=mvrange(0,19)
| mvexpand row_index
| eval 
    source=mvindex(split(source,","),row_index), 
    target=mvindex(split(target,","),row_index), 
    nodeTexts=mvindex(split(nodeTexts,","),row_index),
    type=mvindex(split(type,","),row_index), 
    nodeColors=mvindex(split(nodeColors,","),row_index), 
    nodeIcons=mvindex(split(nodeIcons,","),row_index),
    nodeIconColors=mvindex(split(nodeIconColors,","),row_index), 
    linkColors=mvindex(split(linkColors,","),row_index), 
    linkValues=mvindex(split(linkValues,","),row_index),
    nodeValues=mvindex(split(nodeValues,","),row_index) 
| table source, target, nodeTexts, type, nodeColors, nodeIcons, nodeIconColors, linkColors, linkValues, nodeValues
The following provides a breakdown of each line in the sample code to illustrate how to build a network graph:

  1. The first 2 lines (from | makeresults to | eval source="users,...) create the example network graph data by defining several long, comma-separated strings. These strings are index-aligned, meaning that items at the same position in each string refer to the same node. For example, the first item from each list (index 0) represents the same node:

    • source: users

    • target: hec

    • nodeTexts: Users

    This pattern continues for all subsequent positions in the strings. All other fields, such as type and nodeColors provide data for the source node. You can see that this node corresponds to the leftmost node in the network graph and the first row of the table.

    Field Values
    source "users,hec,hec,cms,cms,indexServer,indexServer,indexServer,indexServer,indexServer,gcp,amazonS3,azure,searchHead,searchHead,searchHead,dashViz,weeklyReport,observability"
    target "hec,indexServer,cms,hec,observability,gcp,amazonS3,azure,searchHead,observability,indexServer,indexServer,indexServer,indexServer,weeklyReport,dashViz,indexServer"
    nodeTexts "Users,HEC,HEC,CMS,CMS,Index Server,Index Server,Index Server,Index Server,Index Server,GCP,Amazon S3,Azure,Search Head,Search Head,Search Head,Dashboard Visualization,Weekly Report,Observability"
    type "user,code,code,code,code,server,server,server,server,server,database,database,database,search,search,search,viz,viz,viz"
    nodeColors "#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF"
    nodeIcons "portrait,cylinder,cylinder,cylinder,cylinder,servers,servers,servers,servers,servers,cylinder,cylinder,cylinder,driveMagnifier,driveMagnifier,driveMagnifier,file,file,file"
    nodeIconColors "#FFFFFF,#808080,#808080,#FFFFFF,#FFFFFF,#808080,#808080,#808080,#808080,#808080,#33fbff,#33fbff,#33fbff,#FFC000,#FFC000,#FFC000,#FFFFFF,#FFFFFF,#FFFFFF"
    linkColors "#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF"
    linkValues "872.41,3,3,3,3,600,1,1,1,1,100,600,1,1,1,1,2,2,0"
    nodeValues "30,300,3,3,3,10,1,1,1,1,1,1,1,1,1,1,2,2,0"
    Note: nodeIcons defines the icon for each node. Network graphs support 74 built-in icons. See Node icon support.
    row_index=mvrange(0,19) creates a multivalue field containing numbers 0-18. This allows the query to turn 1 event into 19 distinct rows.
  2. | mvexpand row_index clones the single event from the | makeresults command into 19 distinct but identical events. Each event has a unique row_index value (0, 1, 2...18).
  3. | eval source=mvindex... uses the split function to turn each comma-separated string into an array. For each row, the mvindex function picks an item from each array based on the current row number. The array is replaced by the picked item. For example, for row 0, the mvindex function picks the item at position 0 for each array: users from the source array, hec from the target array, and so on, replacing each array with its respective picked item. The end result is a table where each row represents a single connection. The following shows an example for the first row, which contains items that were at position 0 in each array:
    row_index source target nodeTexts type nodeColors nodeIcons nodeIconColors linkColors linkValues nodeValues
    0 users hec Users user #F6540B portrait #FFFFFF #F6540B 872.41 30

  4. | table source... selects and orders fields into a table format. The source and target columns provide data on which nodes to draw and how to connect them. You can use the other columns to control the look and feel of the graph.

Copy and paste the dashboard definition into your own dashboard to see the example:
JSON 
{
    "title": "Network Graph",
    "description": "",
    "inputs": {},
    "defaults": {
        "dataSources": {}
    },
    "visualizations": {
        "viz_i3prZmNC": {
            "containerOptions": {},
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "count": 5
            },
            "showLastUpdated": false,
            "showProgressBar": false,
            "type": "splunk.table"
        },
        "viz_nOTzn8Oy": {
            "context": {
                "linkColorsEditorConfig": [
                    {
                        "to": 80,
                        "value": "#D41F1F"
                    },
                    {
                        "from": 80,
                        "value": "#118832"
                    }
                ]
            },
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "layout": "hierarchical",
                "linkColors": "> linkColorValues | rangeValue(linkColorsEditorConfig)",
                "linkStyle": "z",
                "nodeColorValues": "> primary | seriesByName('nodeColors')",
                "nodeColors": "#e4007d",
                "nodeDragPositions": {},
                "nodeHorizontalPadding": 50,
                "nodeIconColorValues": "> primary | seriesByName('nodeValues')",
                "nodeIconColors": "#ffffff",
                "nodeIcons": "> primary | seriesByName('nodeIcons')",
                "nodeTexts": "> primary | seriesByName('nodeTexts')",
                "nodeValues": "> primary | seriesByName('nodeValues')"

          },
            "title": "Splunk Data Pipeline & Infrastructure Topology",
            "type": "splunk.networkGraph"
        }
    },
    "dataSources": {
        "ds_HnFcnx3O": {
            "name": "data pipeline",
            "options": {
                "query": "| makeresults\n| eval \n    source=\"users,hec,hec,cms,cms,indexServer,indexServer,indexServer,indexServer,indexServer,gcp,amazonS3,azure,searchHead,searchHead,searchHead,dashViz,weeklyReport,observability\",\n    target=\"hec,indexServer,cms,hec,observability,gcp,amazonS3,azure,searchHead,observability,indexServer,indexServer,indexServer,indexServer,weeklyReport,dashViz,,,indexServer\",\n    nodeTexts=\"Users,HEC,HEC,CMS,CMS,Index Server,Index Server,Index Server,Index Server,Index Server,GCP,Amazon S3,Azure,Search Head,Search Head,Search Head,Dashboard Visualization,Weekly Report,Observability\",\n    type=\"user,code,code,code,code,server,server,server,server,server,database,database,database,search,search,search,viz,viz,viz\",\n    nodeColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    nodeIcons=\"portrait,cylinder,cylinder,cylinder,cylinder,servers,servers,servers,servers,servers,cylinder,cylinder,cylinder,driveMagnifier,driveMagnifier,driveMagnifier,file,file,file\",\n    nodeIconColors=\"#FFFFFF,#808080,#808080,#FFFFFF,#FFFFFF,#808080,#808080,#808080,#808080,#808080,#33fbff,#33fbff,#33fbff,#FFC000,#FFC000,#FFC000,#FFFFFF,#FFFFFF,#FFFFFF\",\n    linkColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    linkValues=\"872.41,3,3,3,3,600,1,1,1,1,100,600,1,1,1,1,2,2,0\",\n    nodeValues=\"30,300,3,3,3,10,1,1,1,1,1,1,1,1,1,1,2,2,0\",\n    row_index=mvrange(0,19)\n| mvexpand row_index\n| eval \n    source=mvindex(split(source,\",\"),row_index), \n    target=mvindex(split(target,\",\"),row_index), \n    nodeTexts=mvindex(split(nodeTexts,\",\"),row_index),\n    type=mvindex(split(type,\",\"),row_index), \n    nodeColors=mvindex(split(nodeColors,\",\"),row_index), \n    nodeIcons=mvindex(split(nodeIcons,\",\"),row_index),\n    nodeIconColors=mvindex(split(nodeIconColors,\",\"),row_index), \n    linkColors=mvindex(split(linkColors,\",\"),row_index), \n    linkValues=mvindex(split(linkValues,\",\"),row_index),\n    nodeValues=mvindex(split(nodeValues,\",\"),row_index), \n    xPositions=mvindex(split(xPositions,\",\"),row_index), \n    yPositions=mvindex(split(yPositions,\",\"),row_index)\n| table source, target, nodeTexts, type, nodeColors, nodeIcons, nodeIconColors, linkColors, linkValues, nodeValues",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_rH5GysO4": {
                "options": {
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_i3prZmNC",
                        "position": {
                            "h": 270,
                            "w": 1370,
                            "x": 10,
                            "y": 520
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_nOTzn8Oy",
                        "position": {
                            "h": 500,
                            "w": 1380,
                            "x": 10,
                            "y": 10
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "tabs": {
            "items": [
                {
                    "label": "Basic Network graph",
                    "layoutId": "layout_rH5GysO4"
                }
            ]
        }
    }
}

Example: Network graph in force layout

The following shows a network graph using the same data as the first example, but with the following settings:

  • Force layout

  • Dynamic node coloring. Nodes are colored based on node values using a red-blue gradient.

  • Dynamic node sizing. Nodes are sized based on their nodeValues value. The nodeValues values are mapped to a range of 80 to 200 using the lerp() dynamic options syntax formatting function. See lerp().

  • Static node icon and link coloring

  • C-shaped one-way links

A dashboard with a network graph titled "Splunk Data Pipeline & Infrastructure Topology" and a table showing the same information. Shows the same data as the previous example with different styling applied.

Copy and paste the dashboard definition into your own dashboard to see the example:

JSON 
{
    "title": "Network Graph",
    "description": "",
    "inputs": {},
    "defaults": {
        "dataSources": {}
    },
    "visualizations": {
        "viz_i3prZmNC": {
            "containerOptions": {},
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "count": 5
            },
            "showLastUpdated": false,
            "showProgressBar": false,
            "type": "splunk.table"
        },
        "viz_nOTzn8Oy": {
            "context": {
                "lerpConfigNode": {
                    "outputMax": 200,
                    "outputMin": 80
                },
                "nodeColorsEditorConfig": {
                    "colors": [
                        "#D41F1F",
                        "#0070F3"
                    ]
                }
            },
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "layout": "force",
                "linkStyle": "c",
                "nodeColorValues": "> primary | seriesByName('nodeValues')",
                "nodeColors": "> nodeColorValues | gradient(nodeColorsEditorConfig)",
                "nodeDragPositions": {},
                "nodeHorizontalPadding": 50,
                "nodeIconColorValues": "> primary | seriesByName('nodeValues')",
                "nodeIconColors": "#ffffff",
                "nodeIcons": "> primary | seriesByName('nodeIcons')",
                "nodeSize": ">primary|seriesByName('nodeValues')|lerp(lerpConfigNode)",
                "nodeTexts": "> primary | seriesByName('nodeTexts')",
                "nodeValues": "> primary | seriesByName('nodeValues')",
                "showDirection": "oneWay"
            },
            "title": "Splunk Data Pipeline & Infrastructure Topology",
            "type": "splunk.networkGraph"
        }
    },
    "dataSources": {
        "ds_HnFcnx3O": {
            "name": "data pipeline",
            "options": {
                "query": "| makeresults\n| eval \n    source=\"users,hec,hec,cms,cms,indexServer,indexServer,indexServer,indexServer,indexServer,gcp,amazonS3,azure,searchHead,searchHead,searchHead,dashViz,weeklyReport,observability\",\n    target=\"hec,indexServer,cms,hec,observability,gcp,amazonS3,azure,searchHead,observability,indexServer,indexServer,indexServer,indexServer,weeklyReport,dashViz,,,indexServer\",\n    nodeTexts=\"Users,HEC,HEC,CMS,CMS,Index Server,Index Server,Index Server,Index Server,Index Server,GCP,Amazon S3,Azure,Search Head,Search Head,Search Head,Dashboard Visualization,Weekly Report,Observability\",\n    type=\"user,code,code,code,code,server,server,server,server,server,database,database,database,search,search,search,viz,viz,viz\",\n    nodeColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    nodeIcons=\"portrait,cylinder,cylinder,cylinder,cylinder,servers,servers,servers,servers,servers,cylinder,cylinder,cylinder,driveMagnifier,driveMagnifier,driveMagnifier,file,file,file\",\n    nodeIconColors=\"#FFFFFF,#808080,#808080,#FFFFFF,#FFFFFF,#808080,#808080,#808080,#808080,#808080,#33fbff,#33fbff,#33fbff,#FFC000,#FFC000,#FFC000,#FFFFFF,#FFFFFF,#FFFFFF\",\n    linkColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    linkValues=\"872.41,3,3,3,3,600,1,1,1,1,100,600,1,1,1,1,2,2,0\",\n    nodeValues=\"30,300,3,3,3,10,1,1,1,1,1,1,1,1,1,1,2,2,0\",\n    row_index=mvrange(0,19)\n| mvexpand row_index\n| eval \n    source=mvindex(split(source,\",\"),row_index), \n    target=mvindex(split(target,\",\"),row_index), \n    nodeTexts=mvindex(split(nodeTexts,\",\"),row_index),\n    type=mvindex(split(type,\",\"),row_index), \n    nodeColors=mvindex(split(nodeColors,\",\"),row_index), \n    nodeIcons=mvindex(split(nodeIcons,\",\"),row_index),\n    nodeIconColors=mvindex(split(nodeIconColors,\",\"),row_index), \n    linkColors=mvindex(split(linkColors,\",\"),row_index), \n    linkValues=mvindex(split(linkValues,\",\"),row_index),\n    nodeValues=mvindex(split(nodeValues,\",\"),row_index), \n    xPositions=mvindex(split(xPositions,\",\"),row_index), \n    yPositions=mvindex(split(yPositions,\",\"),row_index)\n| table source, target, nodeTexts, type, nodeColors, nodeIcons, nodeIconColors, linkColors, linkValues, nodeValues",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_rH5GysO4": {
                "options": {
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_i3prZmNC",
                        "position": {
                            "h": 270,
                            "w": 1370,
                            "x": 10,
                            "y": 520
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_nOTzn8Oy",
                        "position": {
                            "h": 500,
                            "w": 1380,
                            "x": 10,
                            "y": 10
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "tabs": {
            "items": [
                {
                    "label": "Basic Network graph",
                    "layoutId": "layout_rH5GysO4"
                }
            ]
        }
    }
}

Example: Network graph in grid layout

The following shows a network graph using the same data as the previous examples, but with the following settings:

  • Grid layout

  • Dynamic node icon coloring. Nodes icons are colored based on node values using a color range from red to green.

  • Static node sizing and node and link coloring

  • S-shaped non-directional links (lines instead of arrows)

A dashboard with a network graph titled "Splunk Data Pipeline & Infrastructure Topology" and a table showing the same information. Shows the same data as the previous examples with different styling applied.

Copy and paste the dashboard definition into your own dashboard to see the example:

JSON 
{
    "title": "Network Graph",
    "description": "",
    "inputs": {},
    "defaults": {
        "dataSources": {}
    },
    "visualizations": {
        "viz_i3prZmNC": {
            "containerOptions": {},
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "count": 5
            },
            "showLastUpdated": false,
            "showProgressBar": false,
            "type": "splunk.table"
        },
        "viz_nOTzn8Oy": {
            "context": {
                "nodeIconColorsEditorConfig": [
                    {
                        "to": 20,
                        "value": "#D41F1F"
                    },
                    {
                        "from": 20,
                        "to": 40,
                        "value": "#D94E17"
                    },
                    {
                        "from": 40,
                        "to": 60,
                        "value": "#CBA700"
                    },
                    {
                        "from": 60,
                        "to": 80,
                        "value": "#669922"
                    },
                    {
                        "from": 80,
                        "value": "#118832"
                    }
                ]
            },
            "dataSources": {
                "primary": "ds_HnFcnx3O"
            },
            "options": {
                "linkColorValues": "> primary | seriesByName('linkColors')",
                "linkStyle": "s",
                "nodeColorValues": "> primary | seriesByName('nodeColors')",
                "nodeColors": "#d4d4d4",
                "nodeDragPositions": {},
                "nodeHorizontalPadding": 50,
                "nodeIconColorValues": "> primary | seriesByName('nodeValues')",
                "nodeIconColors": "> nodeIconColorValues | rangeValue(nodeIconColorsEditorConfig)",
                "nodeIcons": "> primary | seriesByName('nodeIcons')",
                "nodeTexts": "> primary | seriesByName('nodeTexts')",
                "nodeValues": "> primary | seriesByName('nodeValues')",
                "preferPorts": "none",
                "showDirection": "none",
                "xPositions": "> primary | seriesByName('xPositions')",
                "yPositions": "> primary | seriesByName('yPositions')"
            },
            "title": "Splunk Data Pipeline & Infrastructure Topology",
            "type": "splunk.networkGraph"
        }
    },
    "dataSources": {
        "ds_HnFcnx3O": {
            "name": "data pipeline",
            "options": {
                "query": "| makeresults\n| eval \n    source=\"users,hec,hec,cms,cms,indexServer,indexServer,indexServer,indexServer,indexServer,gcp,amazonS3,azure,searchHead,searchHead,searchHead,dashViz,weeklyReport,observability\",\n    target=\"hec,indexServer,cms,hec,observability,gcp,amazonS3,azure,searchHead,observability,indexServer,indexServer,indexServer,indexServer,weeklyReport,dashViz,,,indexServer\",\n    nodeTexts=\"Users,HEC,HEC,CMS,CMS,Index Server,Index Server,Index Server,Index Server,Index Server,GCP,Amazon S3,Azure,Search Head,Search Head,Search Head,Dashboard Visualization,Weekly Report,Observability\",\n    type=\"user,code,code,code,code,server,server,server,server,server,database,database,database,search,search,search,viz,viz,viz\",\n    nodeColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    nodeIcons=\"portrait,cylinder,cylinder,cylinder,cylinder,servers,servers,servers,servers,servers,cylinder,cylinder,cylinder,driveMagnifier,driveMagnifier,driveMagnifier,file,file,file\",\n    nodeIconColors=\"#FFFFFF,#808080,#808080,#FFFFFF,#FFFFFF,#808080,#808080,#808080,#808080,#808080,#33fbff,#33fbff,#33fbff,#FFC000,#FFC000,#FFC000,#FFFFFF,#FFFFFF,#FFFFFF\",\n    linkColors=\"#F6540B,#DD9900,#DD9900,#DD9900,#DD9900,#D81D47,#D81D47,#D81D47,#D81D47,#D81D47,#FF0000,#FF0000,#FF0000,#00FF00,#00FF00,#00FF00,#0000FF,#0000FF,#0000FF\",\n    linkValues=\"872.41,3,3,3,3,600,1,1,1,1,100,600,1,1,1,1,2,2,0\",\n    nodeValues=\"30,300,3,3,3,10,1,1,1,1,1,1,1,1,1,1,2,2,0\",\n    row_index=mvrange(0,19)\n| mvexpand row_index\n| eval \n    source=mvindex(split(source,\",\"),row_index), \n    target=mvindex(split(target,\",\"),row_index), \n    nodeTexts=mvindex(split(nodeTexts,\",\"),row_index),\n    type=mvindex(split(type,\",\"),row_index), \n    nodeColors=mvindex(split(nodeColors,\",\"),row_index), \n    nodeIcons=mvindex(split(nodeIcons,\",\"),row_index),\n    nodeIconColors=mvindex(split(nodeIconColors,\",\"),row_index), \n    linkColors=mvindex(split(linkColors,\",\"),row_index), \n    linkValues=mvindex(split(linkValues,\",\"),row_index),\n    nodeValues=mvindex(split(nodeValues,\",\"),row_index), \n    xPositions=mvindex(split(xPositions,\",\"),row_index), \n    yPositions=mvindex(split(yPositions,\",\"),row_index)\n| table source, target, nodeTexts, type, nodeColors, nodeIcons, nodeIconColors, linkColors, linkValues, nodeValues",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_rH5GysO4": {
                "options": {
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_i3prZmNC",
                        "position": {
                            "h": 270,
                            "w": 1370,
                            "x": 10,
                            "y": 520
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_nOTzn8Oy",
                        "position": {
                            "h": 500,
                            "w": 1380,
                            "x": 10,
                            "y": 10
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "tabs": {
            "items": [
                {
                    "label": "Basic Network graph",
                    "layoutId": "layout_rH5GysO4"
                }
            ]
        }
    }
}

Example: Network graph using multiple data sources

The following shows a dashboard with a network graph titled "Splunk Data Pipeline & Infrastructure Topology" that is powered by 2 data sources. The dashboard also includes 2 tables, which show data from the primary and nodeSource data sources that power the network graph.

A dashboard with a network graph and 2 tables.

This example network graph has the following settings:

  • Preset layout using the xPositions and yPositions fields from the nodeSource data source

  • Link width is configured using the linkValues field from the primary data source.

  • Node IDs are configured using the node field from the nodeSource data source.

  • Dynamic node coloring. Nodes are colored based on the values field from the nodeSource data source using a purple gradient.

Configuring node source data source fields using the Set up nodesource data source option is currently not supported. Fields from the node source data source do not appear for selection in the UI for node data fields, such as Node labels. To configure node data fields using fields from the nodeSource data source, you must use the source code editor.

As a workaround, you can instead include the node source data in the primary data source with the other network data to avoid configuring the node source data fields in the source code editor. However, configuring node data as a separate data source is best practice due to the following:

  • Keeping the data sources separate (primary for link data and secondary for node data) makes the data sources easier to understand and troubleshoot.

  • Combining link and node data into one data source will result in repeated information for nodes that have multiple links, which is less efficient.

The following shows an example of configuring nodeIds using the node field from the nodeSource data source:

JSON 
"visualizations": {
        "viz_5LWRC1xl": {
        ...
            "options": {
                "nodeIds": "> nodeSource | seriesByName('node')"
            },
Copy and paste the dashboard definition into your own dashboard to see the example:
JSON 
{
    "title": "Network Graph - Multiple Data Sources",
    "description": "",
    "defaults": {
        "dataSources": {}
    },
    "visualizations": {
        "viz_5LWRC1xl": {
            "dataSources": {
                "primary": "ds_R6zLnr7x"
            },
            "title": "primary",
            "type": "splunk.table"
        },
        "viz_96y4AfX1": {
            "dataSources": {
                "nodeSource": "ds_qDEJnhNT",
                "primary": "ds_R6zLnr7x"
            },
            "description": "Open source code for this viz to see the 2 datasources",
            "options": {
                "layout": "preset",
                "linkWidth": "> primary | seriesByName('linkValues')",
                "nodeColors": "> nodeSource | seriesByName('values')|gradient()",
                "nodeIds": "> nodeSource | seriesByName('node')",
                "nodeTexts": "> nodeSource|seriesByName('nodeTexts')",
                "xPositions": "> nodeSource | seriesByName('xPositions')",
                "yPositions": "> nodeSource | seriesByName('yPositions')"
            },
            "title": "Splunk Data Pipeline & Infrastructure Topology",
            "type": "splunk.networkGraph"
        },
        "viz_AvAMX3E3": {
            "dataSources": {
                "primary": "ds_qDEJnhNT"
            },
            "description": "",
            "options": {
                "columnFormat": {
                    "nodeTexts": {
                        "width": 60
                    }
                }
            },
            "title": "nodeSource",
            "type": "splunk.table"
        }
    },
    "dataSources": {
        "ds_R6zLnr7x": {
            "name": "primary",
            "options": {
                "query": "| makeresults\n| eval source=split(\"users;hec;hec;cms;cms;indexServer;indexServer;indexServer;indexServer;indexServer;gcp;amazonS3;azure;searchHead;searchHead;searchHead;dashViz;weeklyReport;observability\",\";\")\n| eval target=split(\"hec;indexServer;cms;hec;observability;gcp;amazonS3;azure;searchHead;observability;indexServer;indexServer;indexServer;indexServer;weeklyReport;dashViz;__NULL__;__NULL__;indexServer\",\";\")\n| eval linkColors=split(\"#F6540B;#DD9900;#DD9900;#DD9900;#DD9900;#D81D47;#D81D47;#D81D47;#D81D47;#D81D47;#FF0000;#FF0000;#FF0000;#00FF00;#00FF00;#00FF00;#0000FF;#0000FF;#0000FF\",\";\")\n| eval linkValues=split(\"872.41;3;3;bad-width;__NULL__;600;1;1;1;1;100;600;1;1;1;1;2;2;0\",\";\")\n\n| eval row=mvzip(source,target,\"|||\")\n| eval row=mvzip(row,linkColors,\"|||\")\n| eval row=mvzip(row,linkValues,\"|||\")\n\n| mvexpand row\n| eval parts=split(row,\"|||\")\n\n| eval source=mvindex(parts,0)\n| eval target=if(mvindex(parts,1)==\"__NULL__\", null(), mvindex(parts,1))\n| eval linkColors=mvindex(parts,2)\n| eval linkValues=if(mvindex(parts,3)==\"__NULL__\", null(), mvindex(parts,3))\n\n| fields source target linkColors linkValues",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        },
        "ds_qDEJnhNT": {
            "name": "node data",
            "options": {
                "query": "| makeresults\n| eval source=split(\"users;hec;hec;cms;cms;indexServer;indexServer;indexServer;indexServer;indexServer;gcp;amazonS3;azure;searchHead;searchHead;searchHead;dashViz;weeklyReport;observability\",\";\")\n| eval nodeTexts=split(\"Users;HEC;HEC;CMS;CMS;Index Server;Index Server;Index Server;Index Server;Index Server;GCP;Amazon S3;Azure;Search Head;Search Head;Search Head;Dashboard Visualization;Weekly Report;Observability\",\";\")\n| eval type=split(\"user;code;code;code;code;server;server;server;server;server;database;database;database;search;search;search;viz;viz;viz\",\";\")\n| eval nodeColors=split(\"#F6540B;#DD9900;#DD9900;#DD9900;#DD9900;#D81D47;#D81D47;#D81D47;#D81D47;#D81D47;#FF0000;#FF0000;#FF0000;#00FF00;#00FF00;#00FF00;#0000FF;#0000FF;#0000FF\",\";\")\n| eval nodeIcons=split(\"portrait;cylinder;cylinder;cylinder;cylinder;servers;servers;servers;servers;servers;cylinder;cylinder;cylinder;driveMagnifier;driveMagnifier;driveMagnifier;file;file;file\",\";\")\n| eval nodeIconColors=split(\"#FFFFFF;#808080;#808080;#FFFFFF;#FFFFFF;#808080;#808080;#808080;#808080;#808080;#33fbff;#33fbff;#33fbff;#FFC000;#FFC000;#FFC000;#FFFFFF;#FFFFFF;#FFFFFF\",\";\")\n| eval values=split(\"30;300;3;bad-size;__NULL__;10;1;1;1;1;1;1;1;1;1;1;2;2;0\",\";\")\n| eval xPositions=split(\"-288;-135;bad-x;-135;-135;13;13;13;13;13;13;-100;126;180;180;180;350;350;180\",\";\")\n| eval yPositions=split(\"-55;-55;-55;-226;__NULL__;-55;-55;-55;-55;-55;126;126;126;-55;-55;-55;-55;126;-226\",\";\")\n\n| eval row=mvzip(source,nodeTexts,\"|||\")\n| eval row=mvzip(row,type,\"|||\")\n| eval row=mvzip(row,nodeColors,\"|||\")\n| eval row=mvzip(row,nodeIcons,\"|||\")\n| eval row=mvzip(row,nodeIconColors,\"|||\")\n| eval row=mvzip(row,values,\"|||\")\n| eval row=mvzip(row,xPositions,\"|||\")\n| eval row=mvzip(row,yPositions,\"|||\")\n\n| mvexpand row\n| eval parts=split(row,\"|||\")\n\n| eval node=mvindex(parts,0)\n| eval nodeTexts=mvindex(parts,1)\n| eval type=mvindex(parts,2)\n| eval nodeColors=mvindex(parts,3)\n| eval nodeIcons=mvindex(parts,4)\n| eval nodeIconColors=mvindex(parts,5)\n| eval values=if(mvindex(parts,6)==\"__NULL__\", null(), mvindex(parts,6))\n| eval xPositions=mvindex(parts,7)\n| eval yPositions=if(mvindex(parts,8)==\"__NULL__\", null(), mvindex(parts,8))\n\n| dedup node\n\n| fields node nodeTexts type nodeColors nodeIcons nodeIconColors values xPositions yPositions",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_z6DALWN4": {
                "options": {
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_96y4AfX1",
                        "position": {
                            "h": 340,
                            "w": 1380,
                            "x": 20,
                            "y": 20
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_5LWRC1xl",
                        "position": {
                            "h": 360,
                            "w": 710,
                            "x": 20,
                            "y": 380
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_AvAMX3E3",
                        "position": {
                            "h": 360,
                            "w": 660,
                            "x": 740,
                            "y": 380
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "tabs": {
            "items": [
                {
                    "label": "2 datasources",
                    "layoutId": "layout_z6DALWN4"
                }
            ]
        }
    }
}

Node icon support

Network graphs support 74 built-in icons. You can also add your own using a remote icon URL or data URI. Expand this to view the full list of supported icons.

The following shows the built-in icons, as well as examples labeled Remote Icon and Data URI icon, which are meant to illustrate configuring your own custom icons using the respective options.

All built-in icons available for use in network graph.

  • arrowsDoubleLeftRight
  • arrowsFourRightLeftUpDown
  • arrowsFourTowardUp
  • bell
  • bookshelf
  • buildings
  • chartColumnMagnifier
  • chartColumnSquare
  • checkCircle
  • chevronsSlash
  • cloud
  • cogChevronsSlash
  • containership
  • cube
  • cylinder
  • cylinderIndexTable
  • cylinderMetrics
  • cylinderMulti
  • cylinderTrace
  • cylinderWaves
  • deviceEdgeHub
  • deviceSignalWaves
  • dotsThreeBalloon
  • drive
  • driveIndexTable
  • driveMagnifier
  • driveSliders
  • envelope
  • ethernetPort
  • exclamationTriangle
  • factory
  • file
  • fileLogs
  • filter
  • folder
  • forwarderHeavy
  • forwarderUniversal
  • gate
  • globe
  • identityCard
  • informationCircle
  • informationDiamond
  • laptopOpen
  • layout
  • license
  • mobilePhone
  • monitor
  • monitorPhone
  • networkDevice
  • nodeBranch
  • nodeModel
  • nodeTopology
  • picture
  • portrait
  • portraitsTwo
  • printer
  • processor
  • reportDouble
  • securityCamera
  • servers
  • serversCloud
  • shoppingCart
  • signalWavesAngled
  • singleIndex
  • slidersTripleHorizontal
  • squaresAndCircles
  • star
  • store
  • telescope
  • token
  • truck
  • wallBricks
  • wifiSignal
  • cellularGateway

Source options for network graphs

The following options are available for editing network graphs in the source editor:

Property Type Default Description
backgroundColor string > themes.defaultBackgroundColor Specify the color for the background. You may use a dataSource to apply the color.
source string[] > primary | frameBySeriesTypes("string") | seriesByIndex(0) Specify the array of node IDs that links start from.
target string[] > primary | frameBySeriesTypes("string") | seriesByIndex(1) Specify the array of node IDs that links go to.
nodeIds string[] > source Specify the array of node IDs to use for node styling.
nodeTypes string[] n/a Specify the node type for each node in the nodeIds array. Needed for clustering when layout is force.
nodeValues number[] > primary | frameBySeriesTypes("number") | seriesByIndex(0) Specify the node value for each node in the nodeIds array.
nodeTexts string[] > primary | frameBySeriesTypes("string") | seriesByIndex(0) Specify the text to display under each node in the nodeIds array.
nodeColors string | array > themes.defaultNodeColor Specify the color used for nodes.
nodeSize number | array 48 Specify a number to set the same diameter or an array of numbers for custom diameters (8px - 200px).
nodeColorValues (string | number)[] > primary | seriesByType("number") Specify the array of values used for dynamic node coloring.
nodeIcons string[] n/a Specify the icon used for each node.
nodeIconColors array | string > themes.defaultNodeIconColor Specify the color used for each node icon.
nodeIconColorValues (string | number)[] > primary | seriesByType("number") Specify the array of values used for dynamic node icon coloring.
linkStyle string straight Specify the link shape (s, z, c, or straight).
linkColors array | string > themes.defaultLinkColor Specify the color used for links.
linkWidth number | array 2 Specify a number for width or an array of numbers for custom width per link.
linkColorValues (string | number)[] > primary | seriesByType("number") Specify the array of values used for dynamic link coloring.
showDirection string bidirection Specify the directionality of the links (bidirection, oneWay, or none).
layout string grid Specify the layout used for the graph (preset, grid, hierarchical, or force).
nodeHorizontalPadding number 0 Specify the additional horizontal padding between nodes in pixels (0-500).
nodeVerticalPadding number 0 Specify the additional vertical padding between nodes in pixels (0-500).
gridColumns number n/a When layout is grid, specify the number of nodes to display per row.
hierarchyDirection string leftRight When layout is hierarchical, specify the direction (topBottom, bottomTop, leftRight, or rightLeft).
chargeStrength number -30 When layout is force, specify the strength of the charge between nodes.
chargeTheta number 0.9 When layout is force, specify the Barnes-Hut approximation parameter.
chargeDistanceMax number n/a When layout is force, specify the maximum distance for the charge force.
chargeDistanceMin number 1 When layout is force, specify the minimum distance for the charge force.
collidePadding number 10 When layout is force, specify the additional distance around each node for collision.
collideStrength number 1 When layout is force, specify the strength of the collider for node repulsion.
clusterStrength number 0.05 When layout is force, specify the strength of the clustering force.
linkDistance number 30 When layout is force, specify the ideal distance between linked nodes.
linkStrength number n/a When layout is force, specify the strength of the spring force between linked nodes.
tooltipNodeFields string[] n/a Specify the fields to add to the node tooltips.
tooltipHeaderField string n/a Specify the field to add to the tooltip header.
xPositions number[] > primary | frameBySeriesTypes("number") | seriesByIndex(0) When layout is preset, specify the x position for each node.
yPositions number[] > primary | frameBySeriesTypes("number") | seriesByIndex(1) When layout is preset, specify the y position for each node.
nodeDragPositions object n/a Stores the positions for nodes by ID when dragged in the UI.
preferPorts ("horizontal" | "vertical" | "none") n/a Specify the preferred port alignment for s and z links.
showZoomControls boolean true Specify whether to show the zoom controls on the graph.
resultLimit number 1000 Specify the maximum number of link data points rendered.