Highcharts Comments Setup

• 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';

• 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}
/>

• 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>

• 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>

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