we were asked to build a table in place of the tooltip for a line chart. the table includes series name, x-axis value + y-axis values. just to picture it:
--------------------------
Average for 2019
--------------------------
Male | 200
Female | 190
--------------------------
this will obviously be an HTML table with proper header background and other formatting. for this hypothetical scenario, we have two series' Male and Female; and the user is hovered over 2019. note that we dont show the tool tip per data point but for the whole x-axis value (2019) in this case
the behavior is such that when the user hovers over a data point, the corresponding series is highlighted, values for all the series is shown. the challenge rt now is to highlight the hovered over series in BOLD. we are using the following code to render the table:
Code: Select all
tooltip: {
formatter: function () {
var thisTooltip=ChartData.TooltipTable[this.points[0].point.index].Header+
ChartData.TooltipTable[this.points[0].point.index].Rows+
ChartData.TooltipTable[this.points[0].point.index].Footer
return thisTooltip
},
i can find that if i use the following:
Code: Select all
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
console.log('POINT index',this.index)
thanks,
edwin