Here we have used ChartJS as an example library, you can follow the approach for any other charting library
1

Import Components from your Charts Library

import { Chart as ChartJS, BarElement } from 'chart.js';
import { Bar } from 'react-chartjs-2'
2

Import Comments Components and Hooks from Velt

  • Add VeltComments to the root of your app. This component is required to render comments in your app.
  • Add the VeltCommentTool component wherever you want to show the comment tool button. Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. 
import { useCommentModeState, VeltCommentPin, VeltCommentTool, VeltComments } from '@veltdev/react';
3

Create a ref for the Chart component

  • Create a ref and pass it into the ref property of the ChartJS component.
const chartRef = useRef(null);

<Bar data={data} options={options} ref={chartRef} />
4

Add a container div for the Chart component

  1. Apply position: relative style to the div. This ensures accurate positioning of Velt Comment Pins.
  2. Set data-velt-manual-comment-container to true. This:
  • informs Velt which div to use for positioning
  • disables Velt’s automatic comment positioning system within this div, allowing for manual positioning of comment pins
  1. Give a unique ID to the chart to scope comments to the specific chart, isolating them from other charts.
const chartId = 'dataAnalyticsChart'; // Unique ID for the chart

return (
  <div style={{ position: 'relative' }}
    onClick={handleChartClick}
    data-velt-manual-comment-container="true">

    <Bar data={data} options={options} ref={chartRef} />
  </div>
);
5

Add a Comment when the user clicks on the chart

  1. Handle chart click to find nearest data point and add a comment. (Check handleChartClick() method on the right)
  2. Create context object which contains the information about the series, x-axis value, y-axis value, chartId and anything else that’s relevant. This will be used when rendering the comment pin. (Check handleChartClick() method on the right)
  3. Add comment with the context data. (Check addManualComment() method on the right)
  • Only add a comment if the Velt commentModeState is true and the Velt client is available.
6

Render the Velt Comment Pins and set its position

  1. Get all comment annotations.
  2. Loop through it and render the comment pin.
  3. Use the context data in CommentAnnotation, to set the position of the comment pin. (Check showCommentPin() method on the right)
const commentAnnotations = useCommentAnnotations(); // Get Velt comment annotations
const [chartCommentAnnotations, setChartCommentAnnotations] = React.useState([]); // Store annotations for this chart

useEffect(() => {
  // Filter and store comments for the current chart, using unique chart ID
  const chartCommentAnnotations = commentAnnotations?.filter((comment) => comment.context?.chartId === chartId); 
  setChartCommentAnnotations(chartCommentAnnotations as any || []);
}, [commentAnnotations]);

return (
    ... {/* Rest of the container code. */}

    {/* Loop through comment annotations and render the comment pin. */}
    {chartCommentAnnotations.map((comment, index) => showCommentPin(comment))}

    ... {/* Rest of the container code. */}
);

Was this page helpful?

ChartJS Comments SetupInbox Setup