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

function HighChartsLineChartExample() {

    const [data, setData] = useState(CHART_DATA);
    const chartComponentRef = useRef(null);
    const options = {
        // your chart options
    };

    return (
        <div style={{ position: 'relative' }}>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
                ref={chartComponentRef}
            />
            {
                chartComponentRef.current && <VeltHighChartComments id="HighChartsLineChartExample" chartComputedData={chartComponentRef.current as any} />
            }
        </div>
    );
}

1

Import components from Highcharts

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
2

Import VeltHighChartsComments component from @veltdev/react

import { VeltHighChartComments } from '@veltdev/react';
3

Create a ref

const chartComponentRef = useRef(null);
4

Add a container div for the HighchartsReact component and the VeltHighChartComments component

Pass in the ref you created into the ref property of the HighchartsReact component.

<div style={{ position: 'relative' }}>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        ref={chartComponentRef}
    />
</div>
5

Add a container div for the HighchartsReact component and the VeltHighChartComments component

Conditionally render VeltHighChartsComments in the same container div as the HighchartsReact component.

<div style={{ position: 'relative' }}>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        ref={chartComponentRef}
    />
    {
        chartComponentRef.current && <VeltHighChartComments id="HighChartsLineChartExample" chartComputedData={chartComponentRef.current} />
    }
</div>
6

(Optional) Customize Metadata

You can optionally pass an array to the dialogMetadataTemplate props to customize how chart metadata is shown in the Comment Dialog.

Default: ['groupId', 'label', 'value']

For example:

<VeltHighChartComments id="HighChartsLineChartExample" chartComputedData={chartComputedData} dialogMetadataTemplate={['label', 'value', 'groupId']} />