I have a highstock chart to render a stock price and I have an issue when render the tooltip.
The issue is that even I move my mouse across the boundary of the chart, the tooltip still shows up.
For example,
I have a series of stock price from 2015-01-01 to 2015-12-30 rendered on the chart. Then I zoom in from 2015-05-05 to 2015-06-30. Then the x axis of the chart is from 2015-05-05 to 2015-06-30. When I mouse over at the position of 2015-05-05, I can see the value of the stock price for that date and this is as expected. But when I move my mouse a little bit to the right, I can still see the tooltip show the stock price for 2015-05-04.
I can imagine this is an issue related to rounding. But I am not sure how to get rid of this since people may think that the zoom in range is from 2015-05-04 rather than 2015-05-05. To be more specific, how could I make tooltip not show up when the range is out of chart's x axis boundaries?
Any hint or help would be appreciated!
Related
I am developing a datetime series line chart of efficiencies (in percentage) over time.
I need a tooltip to display information about each point on the chart, but I am finding that it is difficult to hover over points which coincide with the line or marker of another series.
The chart will be static in nature in that users will not be able to remove series from the chart - so they wouldn't be able to remove a series in order to be able to get more easily hover over the desired point.
In this demo - https://jsfiddle.net/slaws/37y4cteq/10/ - it takes many attempts moving the cursor in that area to get the tooltip for the last point in the series with the black markers to show.
Here
I moved my cursor around the area marked in red, but couldn't get the tooltip for any points other than one shown to display.
I had to follow a specific procedure and get my cursor to a specific point to be able to hover over the black marker and get the tooltip to display. Here
I had to hover over the second to last black marker and then move the cursor to the point indicated to get the tooltip for the last marker to display.
I have tried using the findNearestPointBy (x, y and xy) in combination with stickyTracking (true and false), with no improvement.
"stickyTracking": false,
"findNearestPointBy": 'y'
I read something about a direct hover mode rather than nearest neighbor but found no details about how to implement that.
Any guidance on how I can make it easier for my users to display the tooltips in my use case would be greatly appreciated!
Setting tooltip.snap as 0 and setting back stickyTracking to default options fixes your issue.
Demo: https://jsfiddle.net/BlackLabel/54q2eubd/
API: https://api.highcharts.com/highcharts/tooltip.snap
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
Right now i am able to form the Json data and got the lables alligned perfectly on 3 axes(X,y1,y2). The problem i am facing in this chart is the tooltip. I am getting the x axis labelled correctly from the row grouping of my matrix report. So on hovering my pointer i am getting the date value as 12/31/1969 by default at any point instead of taking the date from wherever the pointer is placed.Is there any workaround for that!
Flot chart is repeating ticks on right Y axis when:
alignTicksWithAxis:1
I want to align both axes but hide repeated tick values.
http://jsfiddle.net/AUrfY/20/
Is there something in the API i have missed or i have to check thicks before painting and hide duplications.
Set the tickDecimals option to 2 to get reasonable labels for the right y axis (see this updated fiddle).
The label values are not really duplicated, but they are rounded so that they seem so.
Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}