Legend in network graph

[w99910]

I want to show the user about which nodes are some sort of type in network graph.
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.

Thank you in advance.

Code: Select all

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'
      },]
    }]
});

[dominik.c]

Hello w99910!

We appreciate you reaching out to us!

As far as I understand, you want to change the symbol in the legend, right? Instead of the blue circle, you'd like there to be a car or some other image. Do I get you right? If not please precise your requirements.

Regarding changing the symbol in the legend, here you've got similar topics:
https://stackoverflow.com/questions/363 ... end-symbol
viewtopic.php?t=40503

Best regards!

[w99910]

Hello Dominik

Sorry for late reply and incomplete question.
The following is the type of legend what I want but I made it with html and css.
The red circle represent "Car" and the blue circle represent "Person".
How can I make it in highchart network graph?

Here is my codepen.

Thanks in advance.

Best,

[dominik.c]

Hi again!

So do you want to create your own legend using HTML and CSS for points? When you click the red dot "car" in the legend what should happen? Should the red points disappear? What about their structures that they create?

You can make several series and create a simple highcharts legend, then on click on the dot in the legend, the whole series would become invisible. Like that: https://jsfiddle.net/BlackLabel/t7ng01dq/

Best regards!