JSFiddle - React, Tailwind, and code Playground

by djakacki

JavaScript

Highcharts.addEvent(
    Highcharts.Series,
    'afterSetOptions',
    function (e) {
        const colors = Highcharts.getOptions().colors,
            nodes = {};
        
        let i = 0;
        let activityConnections = {};

        if (
            this instanceof Highcharts.Series.types.networkgraph &&
            e.options.id === 'student-network'
        ) {
            e.options.data.forEach(function (link) {
                let student = link[0];
                let activity = link[1];

                // Ensure student nodes have the same color
                if (!nodes[student]) {
                    nodes[student] = {
                        id: student,
                        marker: {
                            radius: 15
                        },
                        color: '#3498db' // Set all student nodes to the same color
                    };
                }

                // Ensure activity nodes have different colors and scale size by connection count
                if (!nodes[activity]) {
                    nodes[activity] = {
                        id: activity,
                        marker: {
                            radius: 15
                        },
                        color: colors[i % colors.length]
                    };
                    i++;
                }

                if (!activityConnections[activity]) {
                    activityConnections[activity] = 0;
                }
                activityConnections[activity]++;
            });

            // Adjust activity node sizes based on connection count
            Object.keys(activityConnections).forEach(activity => {
                nodes[activity].marker.radius = 10 + activityConnections[activity] * 1.5;
            });

            e.options.nodes = Object.keys(nodes).map(function (id) {
                return nodes[id];
            });
        }
    }
);

Highcharts.chart('container', {
    chart: {
        type: 'networkgraph',
  ...