NetworkPlot

NetworkPlot is the core Plugin for the graph data format. It arranges nodes and links with a force-directed layout, and can draw relationship graphs and force-directed bubble charts by switching its internal Layers.

Data format: graph

Supported charts

NetworkPlot renders different charts through different Layer combinations:

• Force Graph — ForceDirected Layer
• Network Bubble — ForceDirectedBubble Layer

Quick start

A minimal configuration draws a force graph. NetworkPlot shows the ForceDirected Layer by default:

import { OrbCharts } from '@orbcharts/core'
import type { RawData } from '@orbcharts/core'
import { NetworkPlot, Tooltip, Legend } from '@orbcharts/plugin-basic'
 
const data: RawData = [
  { id: 'id0', name: 'label0', value: 19800000, series: 'series1' },
  { id: 'id2', name: 'label2', value: 9800000, series: 'series1' },
  { id: 'id14', name: 'label8', series: 'series2', source: 'id0', target: 'id2', value: 100 },
]
 
const chart = new OrbCharts(document.querySelector('#chart')!, {
  data,
  plugins: [
    new NetworkPlot(),
    new Tooltip(),
    new Legend(),
  ],
})
 
// chart.destroy()

Tip: The chart fills its container by default, so set a width and height on the #chart container. See Core Concepts.

graph data contains both "nodes" and "links": records with id, name, value, and series represent nodes; records that also carry source and target represent a link from source to target, and series is used for grouping and coloring.

How layer visibility works

NetworkPlot is composed of multiple Layers, and the Layer names you list in the params are the Layers that get shown. If you specify no Layers (new NetworkPlot()), it shows ForceDirected by default (a force graph). You can also switch Layers dynamically with show/hide/showOnly after creation.

new NetworkPlot()                          // force graph (default)
new NetworkPlot({ ForceDirectedBubble: {} })  // force-directed bubble chart

Tip: Layer visibility and the show/hide/showOnly/toggle methods are common to all Plugins. See Plugin API for the full explanation.

Chart examples

All examples below use the same graph data—just swap the Layer to change the chart type.

Force Graph

new NetworkPlot({ ForceDirected: {} })

ForceDirected draws nodes as fixed-radius dots and the relationships between them as arrowed links, with node positions arranged automatically by a force simulation.

Network Bubble

new NetworkPlot({ ForceDirectedBubble: {} })

ForceDirectedBubble draws nodes as bubbles whose size varies with the value, with labels inside the bubbles showing the node names.

Tip: Pair it with Legend and Tooltip for interactivity—added the same way as in GridPlot.

Plugin parameters

These parameters affect the whole NetworkPlot's behavior, listed alongside Layer names in the same params object:

Note: styles and visibleFilter are shared by all chart Plugins; their structure and usage are documented centrally in Plugin API. Only NetworkPlot's default differences are noted here (styles.padding defaults to { top: 20, right: 20, bottom: 20, left: 20 }, and transitionDuration defaults to 800).

Layer parameters

Each Layer has its own parameters. The main parameters and defaults of each Layer are listed below.

About ColorType: color-related parameters use ColorType ('data', 'primary', etc.), mapping to the colors defined in the Theme. See Theme for the full explanation.

ForceDirected

Tip: point, pointLabel, arrow, and arrowLabel each also have a styleFn function parameter that returns a CSS string to customize individual elements.

ForceDirectedBubble

Tip: bubble, bubbleLabel, arrow, and arrowLabel each also have a styleFn function parameter that returns a CSS string to customize individual elements.

Full TypeScript interface

interface NetworkPlotPluginParams {
  styles: GraphicStyles
  visibleFilter: (datum: ModelDatumGraph) => boolean | null
  datasetIndex: number
}
 
interface NetworkPlotAllLayerParams {
  ForceDirected: ForceDirectedParams
  ForceDirectedBubble: ForceDirectedBubbleParams
}
 
// The constructor accepts a DeepPartial of both (Layer names alongside Plugin params)
new NetworkPlot(params?: DeepPartial<NetworkPlotPluginParams & NetworkPlotAllLayerParams>)

Related

• Data Formats Overview
• Legend — add an interactive legend
• Tooltip — add a hover tooltip