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
    <div style={{ height: 400, width: '100%' }} className='nivo-chart-container'>
        <ResponsiveLine
            data={data}
            layers={[ 
                'grid', 'markers', 'axes', 'areas', 'crosshair',
                'lines', 'slices', 'legends', 'points',
                // Add this function with VeltNivoChartComments
                // component to allow Velt comments inside Chart
                (chartComputedData) => {
                    return (
                        <VeltNivoChartComments id="NivoLineChartExample" chartComputedData={chartComputedData} dialogMetadataTemplate={['label', 'value', 'groupId']} />
                    )
                }
            ]}
        />
	</div>
  )  
}

1

Import component from Nivo Charts

import { ResponsiveLine } from '@nivo/line';
2

Import VeltNivoChartComments component from @veltdev/react

import { VeltNivoChartComments } from '@veltdev/react';
3

add nivo-chart-container class to the parent element of your NivoChart

<div style={{ height: 400, width: '100%' }} className='nivo-chart-container'>
  <ResponsiveLine
    data={data}
    layers={[ 
        'grid', 'markers', 'axes', 'areas', 'crosshair',
        'lines', 'slices', 'legends', 'points',
    ]}
    />
</div>
4

Add custom function as a layer inside your Nivo Chart to enable Velt Comments inside the chart

<ResponsiveLine
  data={data}
  layers={[ 
    'grid', 'markers', 'axes', 'areas', 'crosshair',
    'lines', 'slices', 'legends', 'points',
    // Add this function with VeltNivoChartComments
    // component to allow Velt comments inside Chart
    (chartComputedData) => {
        return (
            <VeltNivoChartComments id="NivoLineChartExample" chartComputedData={chartComputedData} />
        )
    }
  ]}
/>
5

(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:

<VeltNivoChartComments id="NivoLineChartExample" chartComputedData={chartComputedData} dialogMetadataTemplate={['label', 'value', 'groupId']} />