> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Highcharts Comments Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/gifs/Add-Charts-Comments.gif?s=fd119fbdf4018e3fd93fe06a4fb88f67)

> [tab] React / Next.js
>
> ## 1. Import components from Highcharts
>
> ```jsx theme={null}
> 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.
>
> ```jsx theme={null}
> 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.
>
> ```jsx theme={null}
> 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.
>
> ```jsx theme={null}
> <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.
>
> ```jsx theme={null}
> <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:
>
> ```jsx theme={null}
> <VeltHighChartComments
>     id="HighChartsLineChartExample"
>     chartComputedData={chartComputedData}
>     dialogMetadataTemplate={['label', 'value', 'groupId']} />
> ```

> [tab] HTML (coming soon)
>
> Coming Soon

```js React / Next.js theme={null}
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>
    );
}

```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.