Chart Comments Setup
Highcharts Comments Setup
1
Import components from Highcharts
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.
import { VeltHighChartComments, VeltComments } from '@veltdev/react';
3
Create a ref for the HighchartsReact component
- Create a
ref
and pass it into theref
property of theHighchartsReact
component. - This ref object will be used by Velt to get the Chart data and add comment pin to it.
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.
<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 theHighchartsReact
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 theref
you created earlier.
<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:
<VeltHighChartComments
id="HighChartsLineChartExample"
chartComputedData={chartComputedData}
dialogMetadataTemplate={['label', 'value', 'groupId']} />
Was this page helpful?