I am working with a chart that has a complex options configuration like this:
this.chartOptions = {
{
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 500
},
"_id": "highcharts-7kdse7e-57"
}
]
},
"chart": {
"type": "line",
"style": {
"cursor": "pointer"
},
"zooming": {
"type": "x"
}
},
"title": {
"text": "",
"align": "left"
},
"subtitle": {
"text": "",
"align": "left"
},
"credits": {
"enabled": false
},
"legend": {
"enabled": false
},
"plotOptions": {
"area": {
"marker": {
"radius": 2
},
"lineWidth": 1,
"color": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[
0.5,
"#95AAB8"
],
[
1,
"#F3F6F7"
]
]
},
"states": {
"hover": {
"lineWidth": 1
}
},
"threshold": null
}
},
"series": [
{
"data": [
[
1709164800000,
0
],
...
],
"lineColor": "#7E97A8",
"name": "",
"type": "area"
}
],
"exporting": {
"buttons": {
"contextButton": {
"enabled": false
}
}
},
"xAxis": {
"type": "datetime",
"lineColor": "#C3C5C9",
"labels": {}
},
"yAxis": {
"title": {
"text": ""
},
"labels": {
"style": {
"color": "#3F5C69"
}
}
},
"tooltip": {}
}
};
After searching online, I was unable to find a solution for my issue.
I need the tooltip to dynamically appear over the labels of the x-axis in the chart.
I also have another tooltip on the chart that needs to work simultaneously.
I have tried everything but haven't found a working solution.
What can I do to resolve this?