Recently, I encountered a strange issue that has left me puzzled. When I trigger the measure-x event on my graph, the annotation and its toolbar are not displaying on the graph as expected. Instead, they appear on the navigator below. The annotation should ideally show the min, max, and average values on the graph. Interestingly, when I use the measure-xy event with the same code, everything works fine. I have provided my chart options below along with screenshots of the problem. Any assistance in debugging this issue would be highly appreciated.
const chartoptions = {
title: {
text: '',
},
chart: {
animation: false,
},
legend: {
enabled: true,
},
exporting: {
enabled: true,
fallbackToExportServer: false,
},
boost: {
useGPUTranslations: true,
},
xAxis: {
type: 'datetime',
},
yAxis: [
{
id: '2df93b78-7622-4957-a7ec-8aa8482111a9',
labels: { format: '{value}' },
opposite: false,
showEmpty: false,
title: { text: 'kelvin' },
},
{
id: 'df29ccae-94f3-4d0a-bf11-32ad7da1a2ed',
labels: { format: '{value}' },
opposite: true,
showEmpty: false,
title: { text: 'kelvin' },
},
{
id: '1dda5a2f-7337-480a-a486-d778ba0f01bd',
labels: { format: '{value}' },
opposite: false,
showEmpty: false,
title: { text: 'mbar' },
},
{
id: '1dda5a2f-7337-480a-a486-d778ba0f01bd',
labels: { format: '{value}' },
opposite: false,
showEmpty: false,
title: { text: 'mbar' },
},
],
navigator: {
enabled: true,
series: {
dataGrouping: {
enabled: true,
groupPixelWidth: 2,
},
},
},
plotOptions: {
series: {
dataGrouping: {
enabled: false,
},
showInNavigator: true,
animation: false,
states: {
inactive: {
opacity: 1,
},
},
},
},
rangeSelector: {
buttons: [
{
type: 'minute',
count: 1,
text: '1m',
},
{
type: 'minute',
count: 30,
text: '30m',
},
{
type: 'hour',
count: 1,
text: '1h',
},
{
type: 'day',
count: 1,
text: '1d',
},
{
type: 'week',
count: 1,
text: '1w',
},
{
type: 'month',
count: 1,
text: '1m',
},
{
type: 'all',
text: 'All',
},
],
selected: 6,
inputEnabled: false,
},
stockTools: {
gui: {
buttons: ['measure', 'zoomChange', 'toggleAnnotations'],
definitions: {
measure: {
items: ['measureX'],
},
zoomChange: {
items: ['zoomX'],
},
},
},
},
navigation: {
bindings: {
measureX: {
end: function (e, annotation) {
console.log('Annotation end')
},
annotationsOptions: {
typeOptions: {
label: {
enabled: false,
},
},
},
},
},
annotationsOptions: {
events: {
afterUpdate: function (e) {
console.log('Annotation update')
},
remove: function (e) {
console.log('Annotation removed')
},
},
},
},
}
https://i.sstatic.net/aZ0uW.png