Highcharts Comments Setup

React / Next.js

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

HTML (coming soon)

Coming Soon

React / Next.js

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