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
Related
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.
Between two points on a line, if you move the cursor to the right of the midpoint, it will show the tooltip for the right point. Is there a way to keep the tooltip focused on the closest tooltip to the left? I find this more intuitive for my stepchart so that the tooltip displays the info for the current step being moused over.
Unfortunaltey it is not possible, but you can try to replace line chart with, scatter series and setting lineWidth as 2.
plotOptions:{
series:{
lineWidth:2
}
},
example: http://jsfiddle.net/JG83j/
Is it possible to move any elements added using
chart.renderer
as we update the range or the navigator handles?
There is a square in this fiddle. Can we shift its position as we update the navigator?
Or can you point me to the function in the source code that can help?
Thanks
Update: i want to draw trendlines/ fibonnacci retracements etc. based on user events. Currently, i draw & drag the lines using chart.renderer until the mouseup event, calculate the x,y values of the end points, delete the rendered lines & then add new series which visually imitate those rendered lines. This is surely not the best solution. The issue is how to remember the position of the user selection & show/scale the same only when those lines are in the visible range.
So i am wondering if we could directly use some internal "scaling" function that calculates the visible points of the series based on the current extremes.
Rendered object's position is basend on pixels, so when you use navigator, pixels "are the same" so object stay in the same position. But you can catch navigator "sliding" by setExtremes and aftersetExtremes functions and then move element by translate().
Simple example of using translate():
obj.translate(120,20);
http://jsfiddle.net/Ne7QV/1/
Only what you need is common both elements, according to your expectations.
So I have a ColumnChart and one of the built-in functionality is that you can hover over an item (so called category) in the legend of the chart and you get some highlight-border around the corresponding columns in the chart.
Now I have many columns and categories in my chart and a highlighted series/category is very hard to see, because the default behavior just shows a 1px gray border around the columns. My columns are only a few pixels width and I still need to differentiate 10 different categories (=colors). So picking only very light colors (where the border would be easy to spot) is no option. I've found no way of changing:
The style of the highlight-border (primarily the color) or
The color of the columns (fill color) when their respective category is selected in the legend.
Is there some property I can pass to the draw() call of my chart to change the highlighting? Do I have to manually override some events/methods?
Help is highly appreciated!
In the past I used some CSS hacks to change some properties of the generated SVG (path, rect, etc...)
you can play around with advanced selectors and maybe you'll be able to achieve you what you want.
I created a very quick and buggy example, but maybe it will point you on the right direction.
For example:
div.google_chart svg g g g g rect {
stroke-width:0px; fill:red;
}
Hope it helps.
I have following combined stacked bar with 2 data series: blue and red one. The red one is a single point (of line) and it is by default "invisible" (cover with blue data), you can hover over it, its Y coordinate is about 54 +1 for each day after this question is asked :)
Now the question is, how to make the red dot visible? If I select it, it remains on top, that is exactly what I want by default. Any ideas?
Thanks
I'm gonna answer my question, but it is just workaround (working though). After chart is ready, I'm listening to the 'ready' event and immediately select the single point like this
google.visualization.events.addListener(chart, 'ready', function() {
ac.setSelection([{row:0, column:5}]); // use proper values
});