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

Was this page helpful?

Highcharts Comments SetupInbox Setup