Search code examples
highcharts

Customization options using network chart?

I'm a former user of some network graph libs (dataviz, v-network-graph)...

If I leave the first one if favor of the latest one, I'm still facing some issues I'm looking to solve.

I'm having a look on highchartJs, which, even not being free, looks promising and seems way much easier to use.

My needs are quiet simple:

  • I need a complete interaction support (selection, drag&drop...)
  • I need to be able to change the map dynamically (Cannot presume which nodes will be here)
  • I need to be able to customize nodes. Not I dislike bubbles, but I want to use custom icons instead of default plots.

From the documentation, I think that HighchartJS is absolutely capable, but there still is one point I cannot reply...

Is it possible to use custom svg icons instead of colored plots? If so, where should I find documentation?

Solution

  • That's correct, you can achieve all of your requirements by using Highcharts.

    It's also possible to use custom SVG icons instead of colored plots, just use the series.marker.symbol option to define a common symbol for all series nodes or series.nodes.marker.symbol for a specific one.

      series: [{
    marker: {
        symbol: 'url(...)'
    },
    data: [
      ...
    ]
  }]

    Live demo: https://jsfiddle.net/BlackLabel/7m5p3j2x/

    API Reference: https://api.highcharts.com/highcharts/series.networkgraph.marker.symbol

    Useful threads:

    https://www.highcharts.com/forum/viewtopic.php?t=45874

    Using FontAwesome icons as HighChart markers