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 Comment components from Velt

  • Add VeltComments once to the root of your app. This component is required to render comments in your app.
import { VeltHighChartComments, VeltComments } from '@veltdev/react';
3

Create a ref for the HighchartsReact component

  • Create a ref and pass it into the ref property of the HighchartsReact component.
  • This ref object will be used by Velt to get the Chart data and add comment pin to it.
const chartComponentRef = useRef(null);

<HighchartsReact
    highcharts={Highcharts}
    options={options}
    ref={chartComponentRef}
/>
4

Add a container div for the HighchartsReact component

  • Give it a position: relative style. This will help position the Velt Comment Pins accurately.
<div style={{ position: 'relative' }}>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        ref={chartComponentRef}
    />
</div>
5

Add VeltHighChartComments component in the same container

  • Conditionally render VeltHighChartsComments in the same container div as the HighchartsReact component.
  • Set a unique id in the VeltHighChartsComments component to scope comments to the specific chart, isolating them from other charts.
  • Pass the chartComputedData prop with the ref you created earlier.
<div style={{ position: 'relative' }}>
    <HighchartsReact
        highcharts={Highcharts}
        options={options}
        ref={chartComponentRef}
    />
    {
        chartComponentRef.current && <VeltHighChartComments id="HighChartsLineChartExample" chartComputedData={chartComponentRef.current} />
    }
</div>
6

(Optional) Customize the Chart Metadata displayed in the Comment Dialog

  • Pass an array to the dialogMetadataTemplate prop in the VeltHighChartsComments component.
  • This array determines the chart metadata displayed in the comment dialog, representing the data point (e.g., x-axis and y-axis values) on which the comment was added.
  • Customize the order of the keys or remove unnecessary keys to control how the metadata is presented in the comment dialog.
Default: ['groupId', 'label', 'value']For example:
<VeltHighChartComments
    id="HighChartsLineChartExample"
    chartComputedData={chartComputedData}
    dialogMetadataTemplate={['label', 'value', 'groupId']} />

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>
    );
}