Custom hover / tooltip data on highcharts network chart

Question

I am trying to display a custom tooltip on a react highcharts network chart that includes the node id as well as the title and other fields in the JSON data I am feeding it. However I am not able to get this to work using the formatted function specified in the API.

My simplified code is as follows:

import React, { useState, useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

import networkgraph from "highcharts/modules/networkgraph";
networkgraph(Highcharts);

const NetworkChart = () => {

    const chartComponent = useRef(null); // reference to chart obj 
    const [nodeData, setNodeData] = useState([
        { 'id': 'A', title:'ABC', other:'X', dataLabels: { enabled: true }, marker: { radius: 11, fillColor: 'red' } },
        { 'id': 'P', title:'CDE', other:'Y', dataLabels: { enabled: true } },
        { 'id': 'K', title:'EDF', other:'X', dataLabels: { enabled: true } },
        { 'id': 'S', title:'DFG', other:'Z', dataLabels: { enabled: true } },
        { 'id': 'D', title:'SDF', other:'Y', dataLabels: { enabled: true } },
    ]);

    const [linkData, setLinkData] = useState([
        { 'from': 'D', 'to': 'A' },
        { 'from': 'S', 'to': 'A' },
        { 'from': 'K', 'to': 'A' },
        { 'from': 'P', 'to': 'A' }
    ]);


    const [chartOptions, setChartOptions] = useState({
        chart: {
            type: 'networkgraph',
            plotBorderWidth: 1,
        },
        title: {
            text: 'Phrasal verbs'
        },
        subtitle: {
            text: 'Integration: ' + 'euler'
        },
        credits: false,
        plotOptions: {
            networkgraph: {
                layoutAlgorithm: {
                    enableSimulation: false,
                    integration: 'euler',
                    linkLength: 25,
                },
                keys: ['from', 'to'],
                marker: {
                    radius: 5,
                    lineWidth: 1
                }
            },
            series: {
                point: {
                    events: {
                        click: function () {
                            // click function
                            },
                    }
                }
            }
        },
        series: [{
            allowPointSelect: true,
            nodes: nodeData,
            data: linkData,
        }]
    });

    
    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                options={chartOptions}
                containerProps={{ style: { height: 700 } }}
                allowChartUpdate = {true}
                ref={chartComponent}
            />
        </div>
    )
};

export default NetworkChart;

Currently all I see is node id on hover. What I want to see is node id, title and other field values when I hover on each node in the chart.

Answer 1

You can get the required propeerties through: this.point.options

    tooltip: {
        formatter: function() {
            const { title, other } = this.point.options;

            return 'Title: ' + title + ' Other: ' + other
        }
    }

---

Live demo: http://jsfiddle.net/BlackLabel/4zgrnqc2/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter