I was recently introduced to a Javascript graphing library called Highcharts. It's a wonderful tool for anyone who would like to embed a chart into a web page. However, it does not come without some quirks. For example, while there is a way to catch a click event on a legend entry, there is not an easy way to intercept a hover event. I ran into this problem while working on a column chart that would display data labels whenever a legend item is hovered over and keep them hidden otherwise. This issue was solved by using some jQuery trickery. A hover listener was added to the highcharts-legend-item class. The data labels option would be enabled for the every column, or "point", in the chart series whose legend item is being hovered over and hidden for all other series.
This led me to another problem: what if the user wanted to see a data label for a single column? Enabling tooltips seemed to be the right answer. Fortunately for many, but unfortunately for me, tooltips and data labels are handled separately by Highcharts. This means that their positions are controlled by separate functions and their styles are individually set. A quick search told me that I can define a positioner function for the tooltip. The function must return the position where the tooltip would be placed. By using some information about the column being hovered over, I was able to calculate the appropriate position for the placement of tooltip above the hovered column. This position would match the placement of the data labels that would appear when the legend items are hovered over.
Why not simply enable a single data label for a column hover event and disable the rest? Each Highchart has a single tooltip object. As the user moves the mouse pointer between different columns, the tooltip smoothly follows. Using data labels for this application would cause the tooltip to jump. Furthermore, due to the need to iterate through every data label and tell it whether it should be enabled or disabled causes performance issues that would cause the data label posing as a tooltip to show up rather slow, taking away from the smooth user experience of Highcharts.
For my work, please see this jsFiddle.
02/04/2013 Update:
Due to performance issues, I have decided to leave data labels behind and solve my problem using tooltips. Since Highcharts come with a single tooltip element, I ended up simply iterating over every data point in a series, forcing the tooltip to come up via the hover event, and copying the tooltip element to persist it. Surprisingly, the visible performance of this technique was much quicker than using data labels. Please check out the latest jsFiddle here. I am very happy with the outcome, as this method allows a single point of control for the styling and positioning of the tooltips/data labels.
06/18/2013 Update:
It appears that the code no longer functions as intended as of Highcharts version 3.0. I updated the jsFiddle to use Highcharts 2.3.5. See it here. I am sure the code can be modified to work with the latest version.
