This is a nice addition to our chart, but we know that Roshan specifically asked for the tooltip to appear near his cursor. We also take Calvin's advice about making things a bit more engaging and easier to use.
We can enable lines to span the length of the grid and intersect with the cursor. This will make it more obvious where the user's cursor is on the grid. We can also use tooltipLocation to move our tooltip around respective to the cursor. We return to the chart we just created and make a few changes. We set the following options within the cursor object:
- We start by changing
tooltipLocationtose:cursor: { show: true, tooltipLocation:'se', - Next, we add the
followMouseoption and set it totrueto allow the tooltip to follow the cursor:followMouse: true, - We enable both the vertical and horizontal cursor lines by setting
showVerticalLineandshowHorizontalLinetotrue:showVerticalLine: true, showHorizontalLine: true },
We load our updated chart and move our cursor to the data point for June 20 on our Revenue line. Looking at the following screenshot, we can see that revenue was $752,294:
We decide to try the cursor plugin on a chart with multiple y axes. We pull up our profit and revenue chart with two y axes found in 1168_01_06.html. We copy the cursor options from the last chart. This time, we set the position of the tooltip to sw. We also remove the settings of the horizontal cursor line and leave only the vertical line:
cursor: {
show: true,
tooltipLocation:'sw',
followMouse: true,
showVerticalLine: true
},We load the chart and move our cursor to November 20 on the Profit line. As we can see in the following screenshot, the tooltip overlaps our axis labels. This is something we need to remember as we move forward. With the tooltip following the cursor, it might extend beyond our chart, covering axis labels and other chart elements.
We also notice that with the revenue and profit lines so close together, it becomes hard to read the tooltip as we move our cursor around. We remove the followMouse option so that the tooltip will appear in the bottom-right corner of the chart:
cursor: {
show: true,
tooltipLocation:'sw',
showVerticalLine: true
},We can see the result in the following screenshot. Now, we can see our cursor interacting with the data point for each y axis. Also, we can read the data in the tooltip because it does not overlap labels or ticks.