I'm using HighCharts, and I would like to use the crosshairs from the tooltip to help the user to hover a particular point. When the point is hovered I would like to show the information of that point in another div (that is done), but I would like to prevent the tooltip box to appears. Here is the "working" code: http://jsfiddle.net/Mw8WB/266/ . As you can see, I did a display:none in the tooltip, but there is a "circle" that is still there.
Appreciate any help :)
One of the tooltip options is formatter. It is a callback function to format the text of the tooltip. You can disable the tooltip by returning false from this function.
You can see the example here
http://jsfiddle.net/76LwZ/
and the documentation here
http://www.highcharts.com/ref/#tooltip
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 just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.
I want to change the color of the area chart after it is initially rendered.
In the JSFiddle demo after clicking the button you can see the color has changed when you either mouseover the data point or toggle the display by clicking on the legend to hide and then show again.
In both of these the main area color has not updated but the data points and legend has.
JSFiddle Demo: http://jsfiddle.net/simonweston/tLwy5/
Any help would be greatly appreciated.
You can change it dynamically but you need to manipulate the SVG DOM elements instead of the chart object:
$($('.highcharts-series').children()[0]).attr('fill','blue')
Produces:
I have also tried changing it without luck, the only way is to re-create the chart as seen here
I'd like to make hoverable tooltips for x-axis markings, I used basically the same code in this demo.
http://people.iola.dk/olau/flot/examples/annotating.html
Imagine the text next to the vertical lines hidden, and when you mouse over the markings, the text were to show up. That's basically what I am trying to accomplish. I have tried using the flothover event but markings don't show up in those. Is there a plugin or something that performs a similar action?
Try binding to the x-axis marking div instead.
$(".flot-x-axis .tickLabel").bind("mouseover",functionThatDisplaysTooltip);