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']} />

Was this page helpful?

Custom Video Player SetupNivoCharts Comments Setup