netchart

NetChart

Ultimate JavaScript Network chart package for Graph Visualization and Exploration. With NetChart package you can create Network, Hierarchy, Bubble, Dot Matrix and even Radial graph chart types.

It's easy to set-up and customize

Complex network and graph structures become easily understandable and explorable with Net Chart charts package. Customize nearly every aspect of look and feel of these highly performing javascript charts

Nodes

Every object in the network has it's node with various dynamic and/or pre-set visual options.

Links

Links represent relations and different connection types between those objects.

Items

Place and position additional items on links and nodes. Use icons, custom fonts, icon fonts and various font styles.

Auras

Unique and graphically impressive way to divide graph data visualization into clusters.

Features

User Interactions

Move node

Moves the node to other position and switches the particular node to a "fixed" state so it stays where you placed it even if other parts of the network are being moved around.

Select

Selects a node making it available for further actions.

Multiple selection

Select multiple nodes making them available for further actions.

Clear selection

Clears the selection of all nodes.

Reveal tooltip

Shows info window (Modal window) with additional information about the node. Also has action menu by default.

Hide node

To make node and it's neighbours disappear from the visualization.

Collapse node

Collapses the nodes neighbours, leave the node visible.

Zoom in / zoom out

Control the zoom level of graph visualization.

Fit to screen

Fits all network to the screen by adjusting the zoom level and positioning of the network visualization. Layout of the nodes stays intact.

Give it a try!

This is an actual JavaScript chart demo. Hint shows you action to take. Follow the hints to interact with the chart.

Step 1:

Examples

Almost every aspect of NetChart appearance and functionality can be customized to fit your needs. Rich API enables endless integration options to satisfy most demanding requirements.

Social media mapping: X (Twitter) activity on world map

JavaScript world map for Twitter (X) activity monitoring - each tweet is visualized as a node on its geolocation and colored based on the tweet's content. [more technical description is already present in chart embed]

Auras on dark theme

Network chart on dark theme and with Auras that visually distinguish node groups. Nodes with matching 'aura' values in 'data' are grouped in the same aura. Auras can be configured using 'auras' object, and each aura group can have separate 'style' properties. Dark theme enabled with "theme: NetChart.themes.dark".

Hierarchy chart

JavaScript hierarchy chart example that displays node relationships as a top-down hierarchy. Achieved with 'mode: "hierarchy"' under 'layout' (other options include "dynamic", "radial", "static", "categoryHierarchy", "swimlane").

Bubble map (mind map)

Javascript mind map example that shows each idea as a node. Uses 'Radial' layout mode to arrange nodes in a circle that stem from the central parent node.

Network chart

JavaScript network chart that visualizes relationships between people. Each node shows the person's portrait sourced from an external URL. Navigation mode set to 'focusnodes' with 'focusNodeExpansionRadius: 2', which means that the initial view shows only 'initialNodes' and the next two levels of hierarchy - you can click on nodes to reveal more data.

Bubble chart

Simple JavaScript bubble chart. Node sizes are determined based on the "radius" value in 'data'; and they are placed on a Cartesian coordinate plane using x and y coordinates in 'data' - use 'static' as layout mode. By default, value axis is not displayed, but it can be enabled and configured using 'valueAxis' object (NetChart v2 and newer) - visit documentation for more details.

Network chart using random radiuses

This example demonstrates how you can use a custom 'nodeStyleFunction' to affect node sizes or other properties. Here, node sizes are determined by a randomly generated value.

Flow chart

Simple JavaScript flow chart that shows each component as a part of a top-down tree. Achieved by setting layout 'mode' property to "hierarchy".

Driving time between cities on the map

Map chart that connects nodes with links and display estimated driving time between the locations in the label. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Dot matrix chart

Simple matrix chart that displays each node at a static position. Achieved by providing x and y coordinates for each node in data and enabling 'static' layout mode. The nodes are locked in position and cannot be moved by the user because 'draggable: false' under 'style'->'node'.

Network chart over world map

Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.

Graph chart: Radial layout

JavaScript radial graph chart. Uses 'Radial' layout mode to arrange nodes in a circle. 'navigation' -> 'mode' set to 'showall' to ensure that all available data is displayed in the initial view.

Radial graph chart with expandable nodes

JavaScript radial graph chart with node images. Uses 'Radial' layout mode. 'navigation' -> 'mode' set to 'focusnodes' so that the intiial view shows only nodes with focus node state - click to expand and see more.

Grouped Network chart with Auras

Network chart where colorful Auras are used to highlight workgroups and show which people belong to which team. Nodes with maching "aura" values in 'data' will be assigned to the same aura group. Auras can be enabled and configured with the 'auras' object.

Graph chart

JavaScript social network graph chart with node images. Uses 'Dynamic' layout mode for force-directed node placement. 'focusnode' navigation mode with 'focusNodeExpansionRadius: 2' ensures that the initial view shows focus nodes and an additional level - user can expand further with a tooltip button.

Long press event

Network graph example that demonstrates how 'events' object can be used to assign custom functions to event listeners. Here, we assigned 'addData' functions to 'onRightClick' and 'onLongPress'; right clicking a node will spawn a yellow node, but long pressing will spawn a blue node instead. With 'events', you can fully configure each user interaction or other chart events.

Central Layout Gravity

When using force-directed ('dynamic') layout in NetChart, node placement and interactions use simulated physics. This example showcases the 'centralGravityFactor' property, which pulls nodes towards the center. Incrasing this value will create a more intense effect.

Category hierarchy layout mode

The 'categoryHierarchy' layout mode differs from 'hierarchy' by sorting nodes based on 'hierarchyCategory' strings, instead of their relationship hierarchy. This way, you can display nodes at the same level regardless of their actual relationships - useful for flow charts, scheduling or resource management.

Scatter chart with thresholds and regression lines

JavaScript scatter chart example that showcases multiple new features introduced with NetChart v2: X & Y axis lines ('valueAxis'), regression lines ('regressions'), cursor crosshair ('splikelineStyle'), line or area thresholds ('thresholdsX' / 'thresholdsY'), and area shading at custom coordinates ('backgroundShapes').

Big data graph with clustered nodes

This graph chart example showcases how NetChart visualizes a large dataset with 736 nodes in the initial view.

Layout mode comparison: Dynamic, Radial, Hierarchy

In NetChart, you can choose between different layout modes using 'mode' property. In this example, you can switch between 'dynamic', 'radial', and 'hierarchy' to see the difference.

Auras with clickable legend items

Network chart example that shows how NetChart's Auras feature can be used to visually group nodes regardless of their actual relationship - nodes with matching 'aura' values in 'data' will be encircled by a colorful aura that can be configured with 'auras' object. Click on legend to instantly hide all nodes within an aura group.

Navigation mode comparison: showall vs. focusnodes

This org chart example shows the difference between 'showall' and 'focusnodes' navigation modes. In the initial view, 'showall' will display all available data as nodes and links, whereas 'focusnodes' will only reveal 'initialNodes' and nodes with focus node status, plus the number of hierarchy levels defined in 'focusNodeExpansionRadius'.

Companies & Shareholders Network Chart

Interactive network chart that visualizes relations between multiple companies and stakeholders. Click on a node to expand it; use slicers to filter data.

Social network chart with pie and time charts on click

Explore social networks in a beautiful and interactive JavaScript chart. Click on a node to reveal a pie chart.

Fraud inspector Dashboard

JavaScript dashboard prototype for AML or fraud investigation to identify relationships between involved parties.

Crime investigation dashboard example: Panama Papers

Interactive JavaScript dashboard example for fraud and crime network investigation.

Graph Editor

Try NetChart with your own data and experiment with various customization settings in the online Graph Editor.

Link items example

Nodes and links in NetChart can have 'items' object that will display additional content like images, text or other items. Here, we used a function that shows a star icon at each end of a link.

Network chart with pie charts on click

JavaScript network chart where clicking on a node will reveal a pie chart, referencing ZoomCharts PieChart package. The pie chart is called using event listeners.

Hierarchy layout of nodes with links and images

Hierarchy chart where child nodes are positioned below parent nodes - enabled with 'mode: "hierarchy"' under 'layout'. Nodes display images - the image URLs are provided in 'data'. With 'focusnodes' navigation mode, only the first two levels are displayed in the intiial view; click on a node to reveal more data.

Dashed nodes and links

Network chart with dashed links, node outlines and label outlines. 'lineDash' property must have an array that defines the dash sequence - for example, 'lineDash: [3, 3, 5, 5]' means that the pattern will be 3 units of line, 3 blank, 5 line, 5 blank, and then repeat.

Focus nodes

In this org chart example, the nodes with blue background have 'focus node' status, showing all nodes 2 levels deep. Double click on a node to focus it instead.

Random colors example

NetChart example that demonstrates how appearance can be altered with custom functions for 'nodeStyle' and 'linkStyle'. Here, node and link colors are randomly selected by a getRandomNumber function.

Customized link decorations

Links display a circle and arrow to visualize the relationship directions. You can choose between 'circle', 'open arrow', 'hollow arrow', and 'arrow' values for 'fromDecoration' and 'toDecoration' properties.

Node shape comparison

Compare the difference between the built-in node shapes, as defined in the 'display' property for 'node'.

NetChart with dark theme

JavaScript network chart with dark mode enabled. Applied using 'theme: NetChart.themes.dark'.

Radial net layout representing tree data

Social network chart that expands radially from inside out. Achieved with layout:{mode:"radial"}.

Hierarchy chart with node images and Focus Nodes

Hierarchy chart that sorts nodes into levels based on their relationships. The selected navigation mode is 'focusnodes', which means that the initial view displays only nodes with focus node state (in this case, "syslog") and two hierarchy levels above and below it. The user can click on a node to reveal more.

Adding data incrementally

Graph chart where new data is constantly added with 'addData'. In this example, new data is randomly generated with 'getRandomData' function, but real use cases include realtime data updates or 'addData' calls on certain event listeners.

Node items example

Nodes and links in NetChart can have 'items' object that will display additional content like images, text or other items. Here, we used a function that shows an 'age' label and a star icon on certain nodes. This example also showcases 'clickItem' event listener by calling a popup alert when the user clicks on the age label.

Force directed net layout

The 'dynamic' layout mode positions nodes so that the links are of similar length and there are as few overlapping links as possible.

Dashed nodes and links

Shows how to assign different dash areas.

Image nodes look style

This is one of the available node rendering styles - each node displays an image from an URL.

Pinned node style demo

With 'nodeLocked' object, you can apply different style settings to nodes that are in pinned state (activated by user in the tooltip). This example displays a pin icon for pinned nodes - added as a base64 string in 'items'.

Round text nodes look style

One of the available display modes for nodes is 'roundtext', which will make nodes circular, and node labels and images (if provided) will be displayed inside.

Style is embedded in data

In this example, node and link style attributes, such as 'fillColor', 'toDecoration', and 'label', are referenced from data, instead of using style functions.

Text nodes look style

One of the available display modes for nodes is 'text', which will display nodes as text labels. If images are present, they will be shown as small thumbnails next to the label.

Multiline labels

Use style.nodeLabel.aspectRatio to tune label wrapping. Set aspectRatio to 0 to turn off multiline labels.

Fixed node coordinate example

Use node.x and node.y in data together with layout.mode = "static" to control node placement.

Hover effects demo

Nodes display images and links display labels when the user hovers over them. Achieved with custom 'nodeStyle' and 'linkStyle' functions that apply different style properties to 'node.hovered' and 'link.hovered' states.

Images demo

Node images are assigned with a 'nodeStyle' function that loads the image from an URL. Since in this example node ids and filenames use the same naming structure, we can use the "id" value as a wildcard in the URL.

Label style example

Basic label style definitions. The style can be further changed with style functions.

Info popup on hover

Hover over a node to see a custom info popup

Scroll into view

JavaScript network chart demo with automatic zoom into specific nodes with 'scrollIntoView()'.

Manual navigation mode

Network chart with 'manual' navigation mode. The chart will display only nodes that are defined in 'initialNodes' array. User can reveal more data by clicking on a node to expand it.

Show all nodes

Network chart with 'showall' navigation mode. The chart will display all nodes that are present in 'data'.

Preloaded data for NetChart

Simple network chart example with data embedded directly into settings object.

Custom context menu

Simple custom context menu, default menu disabled. Right click on nodes and links to see menu.

Replace data with coordinates

Chart.replaceData discards all existing data and replaces with new data. Coordinates are specified in the data so they are not animated.

Chart.addData adds nodes and links to the chart

With 'chart.addData', you can call a function that adds more nodes or links to the network chart. In this example, addData is activated by a graphDoubleClick event: double click on a node to spawn a new node and link.

Chart.removeData removes objects from the chart

Call a function that removes data from your network chart with 'call.removeData'. In this example, removeData is activated by an onClick event: click on a node or link to remove it.

Interactive node highlighting on hover

JavaScript network chart example where hovering over a node will highlight the entire path from the starting point. Achieved with a custom function for 'onHoverChange' and 'onClick' events.

NetChart with data URL

JavaScript network chart that loads data from a URL - in this example, a JSON file. NetChart also easily integrates with MongoDB, Neo4J and other data sources - read more in the 'Integrations' section of our website.

Network Graph - company network, with icons

JavaScript org chart with icons for each node. This example visualizes anonymous company data and shows relationships between employees and stakeholders.

Network Graph - explore social links

Interactive JavaScript network graph example that visualizes social connections between people. Click on a node to expand it and discover new connections in the network.

Network graph with glyphicons

JavaScript network diagram that shows all connected devices in a network. Link labels show glyphicons from a font (referenced from an external .css file in 'assets'). Glyphicons credit: FontAwesome

Pie charts as network chart nodes

Network chart where each node displays a pie chart.

Reload data

Real time network chart where data is automatically reloaded at the selected interval (here - 500ms). The chart instantly reflects any changes in data, making ZoomCharts visualizations suitable for use cases with real time updates.

Network Graph - colorful bubbles

JavaScript network chart example with data-driven node formatting. Node style is referenced from 'data' - each node has its own style parameters, including "fillColor", "radius", and others.

Network Graph - drag external elements onto the chart

This network chart example showcases how NetChart can integrate with external HTML elements. Here, dragging a rectangle on a node will call a function that changes the fill color of that node.

Node filtering with slider

Social network chart example where you can use a slider to filter people by age. The slider uses a custom function that uses the "age" value in 'data' to exclude nodes that are outside the selected age range.

NetChart with data function

JavaScript network chart with incremental loading. Data function is called with jQuery only when the user requests it by expanding the visible nodes.

Network Graph - big data network

Big data network graph with 5220 nodes and 6047 links, showcasing the NetChart's capability to visualize even extremely large datasets. If a node marker has small lines, it means that clicking on it will reveal additional nodes that are initially hidden.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

NetChart on GeoChart

Map chart with a network chart on top. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Replace data with a different source using chart.reloadData

Change network chart's data source with chart.reloadData, which will fire a new request. With chart.replaceSettings, the data URL is changed upon an event - in this case, pressing an external HTML button.

Connect nodes by dragging

Network chart where dragging one node over another will connect them with a link. Achieved with a custom 'connectNodes' function that is called when 'getOverlappingNodes' function meets its conditions (overlapping node X & Y coordinates).

Custom info popup

Simple custom info popup, enabling info popup on custom items.

Custom popup on click

Integration between JavaScript network chart and external HTML elements. Here, an onClick event will call a popup element that is not a part of NetChart, but instead is referenced from HTML.

Legend represented classes

In NetChart, nodes and links can be grouped into categories using 'className' values in 'data'. The legend displays each class as a clickable legend item. If you wish to exclude a class from the legend, use "showInLegend: false".

Network graph - nodes with custom thumbnails

Website sitemap visualized as a JavaScript graph chart. Each website page displayed as a node with its own thumbnail. Initial view shows the top level directories, and clicking will reveal its subdirectories or files.

Change user's mouse cursor on hover

Change user's mouse pointer when they hover over a node in the network chart. Achieved with 'node.cursor' in 'nodeStyle' function.

Radial layout for network chart

Network chart with 'radial' layout mode. The top level in node hierarchy ("Joe") is placed in the middle, and each subnode branches outward in a circular layout.

Custom shape example

In addition to NetChart's built-in node shapes, developers can provide their own shapes and their own rendering functions.

ClassName is embedded in data

In this example, nodes and links have className attribute in data, which assigns them in classes that will allow to customize their 'style' separately with 'nodeClasses' and 'linkClasses'. Useful for visually distinguishing data by category.

Get started with ZoomCharts

Start free to explore the possibilities of the Zoomcharts JavaScript charts library.

Get started

Purchase

Integrate all of our charts in your website, SaaS, OEM or any other product.

Purchase