> ## 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.
# NivoCharts Comments Setup
```jsx theme={null}
import { ResponsiveLine } from '@nivo/line';
```
* Add `VeltComments` once to the root of your app. This component is required to render comments in your app.
```jsx theme={null}
import { VeltNivoChartComments, VeltComments } from '@veltdev/react';
```
* Add a `nivo-chart-container` class to it. This will help us position the Velt Comment Pins accurately.
```jsx theme={null}
```
* Add a custom function as a layer inside your Nivo Chart component and return `VeltNivoChartComments` component.
* Set a unique `id` in the VeltNivoChartComments component to scope comments to the specific chart, isolating them from other charts.
* Pass the `chartComputedData` props to it.
```jsx theme={null}
{
return (
)
}
]}
/>
```
* 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}
```
Coming Soon
```js React / Next.js theme={null}
import { ResponsiveLine } from '@nivo/line';
import { VeltNivoChartComments } from '@veltdev/react';
import { useState } from 'react'
function YourComponent() {
const [data, setData] = useState(CHART_DATA);
return (
// add nivo-chart-container class to the parent element of your NivoChart
{
return (
)
}
]}
/>
)
}
```