Highcharts - a with hat in tooltip - highcharts

I have a code that generates charts dynamically based on the users inputs. I do not specifically format the tooltip, I just allow the defaults to take control. For some reason, there is consistently an a with a hat over it in the tooltip. For example, when hovering over a column chart entry, the tooltip shows:
Category
a(hat)- Series name:Value
Any idea where this ahat is coming into play?

Related

Highcharts Get legend "icon" in tooltip

Is there any way to get the legend "icon" in tooltip? I need to show the legend "icon" in the tooltip so i can identify what series I'm referring to.
I'll try to explain it better.
When you create a chart, in the legend, next to the name of the series, there is a "mini" line, that represent the line of the series, the color, and the style.
That what I need to show in the tooltip.
I'm not referring to the dot marker but the small lines that appears in the legend.
Is that possible?
Edit:
I'm using the formatter that the tooltip api provides. There I have a reference of the point that I'm hovering on, and all the data associated to that point.
I can get the value, the chart, the series, the series to which it belongs, que point marker, almost everything.
But I can't figure how to get the little coloured line that appears next to every series name in the legend.
I guess is as simple as get one of the values that appears in the point data, but I don't know what I should look for, there are a lot of properties.
I found a solution.
You can look for the point.series.legendLine.
There you have all the info required for the legend svg, even you can get the outerHTML and paste directly to show the legend icon.

Changinx Bar Charts X position on Highcharts

We have a request from customer and we need to trick the highcharts bar view.
The problem is our series contain timestamp vs value but business wise this value is corresponding to previous timestamp to that value's timestamp. So we would like to show the bars in between of these timestamps.
So is there an easy way to do this in highcharts w/o playing with the points in the series.
See images below;
Current Highchart Behaviour
Requested Chart Behaviour
You can use xAxis.tickPositioner in order to move ticks and xAxis.labels.formatter to change labels values.
Live example: https://jsfiddle.net/h9zjmqap/
Output:

Indicate an important date on a chart with either a guideline (with text) or an opened callout

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.

highcharts tooltip stop update when mouse over

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.

Google charts: is it possible to display tooltips when hovering areas in stacked area chart?

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.

Resources