In a highcharts line chart, I want to present a link in the tooltip for people to explore the underlying data set for a specific point by clicking on it (done, I used useHTML). The chart itself is an aggregated view showing statistics for some values (y) for different categories (series) across time scale (x), hence the motivation for exploring the non-aggregated data.
However, when the chart becomes dense enough, the user cannot mouseover the tooltip to click the link because it updates with the adjacent data points from the next point/s. Thus, I want to stop the tooltip from updating when the mouse is directly on top of it. How am I able to do this?
You can play around with tooltip.positioner - to make sure user will be able to click that tooltip URL. Or just change logic, so user can click on column instead, just like demo here.
Related
enter image description hereFor Example In high charts take bar chart.In Bar chart if i clicked on one data point the other data points should disable.Please find the image
You can call Point.select() function on point from another chart in select event. If you want to get rid of that point, use Point.remove() function instead.
API Reference:
http://api.highcharts.com/highcharts/Point.select
http://api.highcharts.com/highcharts/Point.remove
http://api.highcharts.com/highcharts/plotOptions.column.point.events.select
Example:
http://jsfiddle.net/ha7jxztv/
I'm looking for a way to indicate key dates on a highchart with a label eg Public Holiday. I can't find a way to add labeled guidelines or add an opened callout to a point? Help appreciated.
In Highstock you have series type called flags which is a opened callout (similar to Dygraphs annotation). This is probably the closest fit to the indicators you referred. See this JSFiddle example of how it looks. Note how this example uses the Highstock source file, but builds a Highcharts chart. See this documentation for official information.
In Highcharts you can highlight points, labels and value in a wide variety of ways. First of you can add data labels to your points, which renders text next to it. Secondly you can use plot lines to highlight certain values along an axis. See this JSFiddle example of how both of these options can be used.
Of course there are lots of ways to improve and build upon this out of the box functionality, but that is up to your specific demands and desires.
I have a situation where I need to remove all margins from a highchart and remove the x/y axis so it fills a series of columns in a table completely.
I did that, no problem. Chart goes to the extremes as needed.
What I need now is that pesky yaxis I already removed...but displayed in a table cell outside of the existing highcharts object.
It would seem easy, as though I could just set the overflow property of yaxis to 'visible' and play with the offset...which would work however this would only work if I wanted to re-position the axis within the boundaries of the highchart object. I want him in a different cell entirely.
Is there anyone who has had experience in this situation? Is it going to require me to have a secondary highchart with only a y-axis?
Best answer gets a green check.
EDIT :: I now have dispersed each 'day' into their own column (more bars coming per day [scheduled,actual,etc...]). In order to keep the scales lined up, I manipulate the yAxis:max property and set them all to a derived value.
In the open column (currently w/ text Hourly Trends) is where I would put an additional highchart module with no series data but with the same min/max/tickInterval.
The next big leap will be to see the data is alive and changes w/ schedule. May have to start another thread for that one, no?
Create a new HC object with no data but only the yAxis (making sure it is the right scale, etc). Perhaps add the same series of data to it but hide the series? Add it to the location you want. This seems kludge and not very good practice. Each business use is different but why would you want this?
EDIT based on comment of business rules:
Why not come at this from a different direction and have the individual chart elements (the bars/points/etc) be a single point chart. This way you have one chart per column. You can then set up the yAxis to be text and not worry about the position. If we could see an example of the page layout and the desired result that would help.
I have a stacked area chart using google charts. An example is here: https://code.google.com/apis/ajax/playground/?type=visualization#area_chart
The problem is, when I hover the cursor over an area, no tooltip is displayed. I need to hover the boundary of two neighboring areas to display the tooltip.
Is it possible to display tooltips when hovering areas? If not, do you know of some workaround?
You can use a SteppedAreaChart for this. Set isStacked to true, and by default the tooltips will be shown on hovering over an area.
No, you can't spawn the tooltips by hovering over the area. There is no way easy way to work around this, as the Visualization API does not trigger mouse events on the areas.
If you want to put the effort into this, you can create custom mouse event handlers on the chart's SVG/VML code. It might be possible to extrapolate which area the mouse is in, and given that, you can extrapolate the x-axis position from the mouse coordinates using the ChartLayoutInterface, and spawn a custom tooltip based on that information. Be aware that any solution involving the chart's SVG/VML code could break at any time, as the internal structure of the charts is not guaranteed to be stable from version to version.
For line chart tooltip, if we set "share: true", we can see all data with same X-Axis value in a single bubble. if we set "share: false", we can see only one data in single bubble.
My question is whether there is a way to see all data in tooltip when the points are overlap with each other(or very close), but see only one data when a point is far from others.