I have created a component for using BarChart and LineChart. When I am hovering on the data points in the said graph, the console is getting filled with errors mentioned below.
Versions Used
"highcharts": "^10.2.0", "highcharts-react-official": "^2.1.3", "react": "^16.8.6",
-
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function at k.refresh (highcharts.src.js:24745:1) at g.<anonymous> (highcharts.src.js:28123:1) at x (highcharts.src.js:1660:1) at g.firePointEvent (highcharts.src.js:25813:1) at f.runPointActions (highcharts.src.js:28121:1) at f.onContainerMouseMove (highcharts.src.js:27678:1) -
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function at k.refresh (highcharts.src.js:24745:1) at g.<anonymous> (highcharts.src.js:28123:1) at x (highcharts.src.js:1660:1) at g.firePointEvent (highcharts.src.js:25813:1) at f.runPointActions (highcharts.src.js:28121:1) at g.onMouseOver (highcharts.src.js:26371:1) at SVGGElement.e (highcharts.src.js:43249:1)
Chart Options
{
"chart": {
"zoomType": "xy",
"spacingTop": 50,
"style": {
"fontFamily": "Work Sans, sans-serif"
},
"alignTicks": true
},
"colors": [
"#4a8cb2",
"#506A78",
"#bbbbbb"
],
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"title": {},
"margin": 25,
"style": {
"top": 10
},
"categories": [
"Country: other",
"USA",
"Malaysia",
"India",
"United Kingdom",
"Switzerland",
"South Africa",
"Singapore",
"New Zealand",
"Scotland",
"China"
]
},
"tooltip": {
"formatter": {}
},
"yAxis": [
{
"title": {
"text": "ABC"
},
"plotLines": [
{
"color": "#D5D5D5",
"opacity": 0.5,
"dashStyle": "Dash",
"width": 2,
"org_score": 10,
"value": 63,
"label": {
"align": "right",
"style": {
"fontWeight": "bold"
},
"text": "Org Moment Score: 63"
},
"zIndex": 2
}
],
"min": null,
"max": null,
"allowDecimals": false,
"showFirstLabel": true,
"showLastLabel": true,
"labels": {},
"opposite": true
},
{
"title": {
"text": "ABC"
},
"allowDecimals": false,
"gridLineWidth": 0
}
],
"plotOptions": {
"column": {
"stacking": "normal",
"pointWidth": 20,
"states": {
"hover": {
"brightness": -0.3
}
},
"dataLabels": {}
},
"series": {
"pointWidth": 15,
"marker": {
"fillColor": "#FFFFFF",
"lineWidth": 2,
"lineColor": null
},
"dataLabels": {}
}
},
"series": [
{
"name": "Lorem Ipsum",
"type": "column",
"yAxis": 1,
"data": [
1,
73,
20,
24,
49,
6,
9,
14,
1,
1,
1
]
},
{
"name": "Ipsum Lorem",
"type": "line",
"color": "#ffdc4c",
"data": [
47,
62,
63,
63,
63,
63,
65,
65,
81,
81,
84
]
}
],
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"margin": 10
},
"exporting": {
"chartOptions": {
"title": {
"text": "'Lorem Ipsum Lorem Ipsum"
}
},
"enabled": true,
"allowHTML": true,
"sourceWidth": 1200,
"sourceHeight": 400,
"csv": {},
"menuItemDefinitions": {
"label": {
"text": "Show-Hide Data Labels"
}
},
"buttons": {
"contextButton": {
"align": "right",
"y": -45,
"x": -5,
"menuItems": [
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"separator",
"label"
]
}
}
},
"page": "Ipsum Lorem Ipsum"
}
Usage:
<HighchartsReact
highcharts={Highcharts}
options={chart_options}
allowChartUpdate={true}
ref={chart_ref}/>
Props Passed:
highcharts: Highcharts from highcharts/highstock
ref: React.createRef() passed
I have tried searching for the solution to this issue, but all I have gotten so far is that there are some issues related to tooltips. I can't pinpoint the issue, any help would be appreciated.
