Highcharts

Start your Highcharts journey today

立即试用
立即购买
Skip to Content

Arc diagram

The arc-diagram chart visualizes relations and their strength between nodes of a data set. In order to use it, you need to load the modules/arc-diagram.js module.

Data structure

Notice the structure of the keys  feature that links the nodes using the keyword from and to, and weight to represent the volume of the connection: keys: ['from', 'to', 'weight']. Arc diagram-specific options such as linkWeight  and centeredLinks  are also shown in this snippet:

series: [{ keys: ['from', 'to', 'weight'], type: 'arcdiagram', name: 'Flights', linkWeight: 1, centeredLinks: true, data: [ ['Bergen', 'Cracow', 1], ['Cracow', 'Frankfurt', 2], ['Bergen', 'Frankfurt', 1], ['Cracow', 'Chicago', 1] ] }]

Using the marker  option, we can shape the symbol of our data nodes. An example of such a configuration with the necessary options can be found in the demo below:

Another important feature to mention is the ability to rotate the chart with the inverted and reversed options:

For more detailed samples and documentation check the API reference .