Legend in network graph ( Highchart Js)

Question

I want to show the user about which nodes are some sort of type in network graph of Highchart JS.

For example, the red node would be about "car" and the black node would be about "person".

How can I implement such a legend in Highchart Js?

Here is my codepen.

Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph'
    },
    plotOptions: {
        networkgraph: {
            keys: ['from', 'to']
        }
    },
    legend: {
        enabled: true
    },
    series: [{
        showInLegend: true,
        data: [
            ['A', 'B'],
          ['C','D'],
          ['E','F']
        ],
      nodes:[{
        id:'A',
        color:'#ff1000'
      },{
        id:'B',
        color:'#222222'
      },
            {
        id:'C',
        color:'#ff1000'
      },
            {
        id:'D',
        color:'#222222'
      },
        {
        id:'E',
        color:'#ff1000'
      },
            {
        id:'F',
        color:'#222222'
      },]
    }]
});

Thank you in advance.

Answer 1

Have you tried adding the dataLabel to series property and add a name to your nodes.

   {
      id: "A",
      color: "#ff1000",
      name: "car" <--------- name property
    },

Something like this:

 series: {
  dataLabels: {
    linkFormat: '',
    enabled: true,
    format: "{point.name}",
    crop: false,
    defer: false,
    useHtml: true,
  },
}

Full example:

https://codepen.io/tiagotedsky/pen/zYZYOLR