{"id":18310,"date":"2019-07-19T16:32:10","date_gmt":"2019-07-19T14:32:10","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18310"},"modified":"2026-01-12T11:32:19","modified_gmt":"2026-01-12T11:32:19","slug":"network-graph","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/network-graph\/","title":{"rendered":"Network graph"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>A <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/networkgraph\">network graph<\/a> is a chart that displays relations between elements (nodes) using simple links. Network graph allows us to visualize clusters and relationships between the nodes quickly; the chart is often used in industries such as life science, cybersecurity, intelligence, etc.<\/p>\n<p>Creating a network graph is straightforward. This <a href=\"https:\/\/codepen.io\/mushigh\/full\/RzRXwE\" class=\"demo-container\">demo<\/a> shows five nodes and the relationship between them. Node 1 has a relationship with the nodes 3, 4, and 2. The node 5 also has a relationship with nodes 2 and 4, but not with node 3. <\/p>\n<p  class=\"demo-container\"><iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"A network graph displays random five nodes and the relationship between them\" src=\"https:\/\/codepen.io\/mushigh\/embed\/RzRXwE?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/RzRXwE'>Network Graph: simple<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>To replicate this chart, all you have to do is to create a table of relationships following this structure <code>['from', 'to']<\/code>. In this example the table looks like:<\/p>\n<pre>data: [\r\n  ['Node 1', 'Node 2'],\r\n  ['Node 1', 'Node 3'],\r\n  ['Node 1', 'Node 4'],\r\n  ['Node 4', 'Node 5'],\r\n  ['Node 2', 'Node 5']\r\n]<\/pre>\n<p>Here\u2019s another <a href=\"https:\/\/codepen.io\/mushigh\/full\/pXbXBg\">demo<\/a> with a little more complexity. The nodes represent languages Indo-Europen language tree, with links representing relationships between the languages.<\/p>\n<p class=\"demo-container\"><iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"A network graph displays the Indo-Europen language tree\" src=\"https:\/\/codepen.io\/mushigh\/embed\/pXbXBg?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/pXbXBg'>Network Graph: simple representation<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Notice the use of colors to help the reader to see the clusters quickly. The orange color represents the Italic language, whereas the green and pink colors represent the Celtic and the Indo-Iranian languages, respectively.<\/p>\n<p>To add a color to a node, use the <code>nodes<\/code> option that is basically an array to access any node using its id:<\/p>\n<pre>nodes: [{\r\n      id: 'Indo-Iranian',\r\n      color: indoIranianColor\r\n    },\r\n    ...<\/pre>\n<p>The color property has the node\u2019s color; in this case, the variable indoIranianColor. The colors of the nodes are defined into variables for more flexibility and maintenance in the first line:<\/p>\n<pre>var celticColor = \"#7becb2\",\r\n  italicColor = \"#ecb27b\",\r\n  indoIranianColor = \"#ec7bb6\";<\/pre>\n<p>Another way to visualize the connections and the nature of the nodes is by adding the size variable to the networking graph; the node\u2019s size helps to classify the categories of the node. The <a href=\"https:\/\/codepen.io\/mushigh\/full\/XLprvO\">demo<\/a> below illustrates the South Korean domestic flight routes. The nodes represent the airports that are classified into three main categories:<\/p>\n<ul>\n<li>Airports with more than 50 direct destinations.<\/li>\n<li>Airports with more than 10 direct destinations.<\/li>\n<li>Airports with less than 10 direct destinations.<\/li>\n<\/ul>\n<p class=\"demo-container\"><iframe height=\"650\" style=\"width: 100%;\" scrolling=\"no\" title=\"A network graph displays South Korea domestic flight routes\" src=\"https:\/\/codepen.io\/mushigh\/embed\/XLprvO?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/XLprvO'>Network Graph: South Korea domestic flight routes<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>The colors and sizes help readers quickly identify airport size relative to each other. Size can also be used as an accessibility aid, as it allows people who are color blind to get the data story, even if they can\u2019t tell colors apart.<\/p>\n<p>You can also use a <a href=\"https:\/\/codepen.io\/mushigh\/full\/GbrqYO\">monochrome<\/a> chart for making the chart more accessible. However, personally, I prefer the one with different sizes and colors since it makes life easier for all readers. <\/p>\n<p><iframe height=\"600\" style=\"width: 100%;\" scrolling=\"no\" title=\"A monochrome network graph displays South Korea domestic flight routes\" src=\"https:\/\/codepen.io\/mushigh\/embed\/GbrqYO?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/GbrqYO'>Network Graph: South Korea domestic flight routes (monochrome)<\/a> by mustapha<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Even though Networking graphs are simple to create and pleasant charts to share, they might be very complex and hard to understand if they display a significant number of nodes. There is no exact amount of nodes to avoid, but try to use different colors, sizes, and of course, your common sense to make your chart easy to read as much as you can \ud83d\ude42 <\/p>\n<p><i><b>Remark<\/b><br \/>Here is an <a href=\"https:\/\/www.highcharts.com\/demo\/network-graph\">example of a network graph<\/a> that uses both color and size to make a large set of data easy to understand.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an interactive network graph using Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":18321,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094],"coauthors":[699],"class_list":["post-18310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18310"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18310\/revisions"}],"predecessor-version":[{"id":29209,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18310\/revisions\/29209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/18321"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18310"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}