I need help for 2 things please. My Activity gauge displays 2 series: Ring A and Ring B.
1) Instead of the default tooltip where the series name and % show in the middle while hover over, can I have it display the inner ring (B) name and % without hover over? And when user hovers over the outer ring (A), it would display the name and % for the outer ring and stays that way till user hovers over the inner ring again? This is more of a swapping kind of action.
2) I would also like to have a regular tooltip (round corner rectangle box like the tooltip for piechart) displaying strings of text that relates to each ring.
Expected behavior:
Activity gauge would show Ring B name and % in the middle of the gauge design when webpage is done loading. As user hovers over Ring A, tooltip box shows with a string of text describing Ring A. As user hovers over Ring B, Ring B name and % appears and stays in the middle of the gauge design with a tooltip box showing a string of text describing Ring B.
(I have tried many ways with my limited knowledge of js and highcharts, I cannot get this to work. Please help.)
Without knowing particulars of your exact chart code here are some ideas.
To get extra text in the tooltip you can create your data series like:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1,
extraText: 'Some really neat long text containing some really important info'
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5,
extraText: 'Some short text containing some really dull info'
}]
Then in the tooltip use the formatter:
tooltip: {
formatter: function() {
return 'The value for <b>' + this.key +
'</b> is <b>' + this.y + '</b>' +
'<br >' +
this.point.extraText;
}
},
A live Fiddle of this extra text tooltip.
Now to get the first item in your conditions met I would use dataLabels in conjunction with events and handle mouse actions. Following the comment made by Paweł on this answer you can get what you need.
Related
My issue with the Highcharts Stacked Area chart is in how it selects which series to highlight. It SEEMS to highlight the series associated with the nearest point, whereas I would like it to highlight the series the mouse is actually hovering over.
In the image below, the mouse is actually hovering over the area in light blue, but because the nearest point is in the dark blue series, it's highlighting that area.
This causes an issue when you have multiple series stacked with very small and very high values (even zero). The user hovers a series with a large area, but the point it highlights might be associated with a series with no visible area (because it has a zero data point), and it will highlight the point with a tooltip saying something like "Switzerland: 0.00" rather than "Brazil: 9.999.99", even though you're hovering over Brazil
Disable stickyTracking and enable trackByArea options:
plotOptions: {
series: {
...,
stickyTracking: false,
trackByArea: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/7ens45ot/
API Reference:
https://api.highcharts.com/highcharts/series.area.stickyTracking
https://api.highcharts.com/highcharts/series.area.trackByArea
I'm using HighCharts to display a couple of graphs on my Pregnancy Calculator. They were working perfectly until recently. Now, for some strange reason, the Symbol image of the teddy bear on the second chart is appearing (in the Highcharts code) as opacity:0 until you mouse over the space (at which point the teddy bear appears). I can't understand why it's suddenly doing this or seem to find a way to set it to opacity:1
https://www.thecalculatorsite.com/health/pregnancy-calculator.php
(you'll need to click 'calculate' and then scroll down to the second graph, marked as 'probability of birth by this day' - you'll see a gap in the graph where there isn't a green marker. The teddy bear symbol should be there, but isn't appearing until mouse-over).
Thanks for your help.
Set opacity to 1 for normal state:
series: [{
...,
data: [..., {
y: 54.805615550756,
marker: {
...,
states: {
normal: {
opacity: 1
}
}
}
}, ...]
}]
Live demo: https://jsfiddle.net/BlackLabel/zrp4tfdk/2/
API Reference: https://api.highcharts.com/highcharts/series.line.data.marker.states.normal
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
In older versions of highcharts you could have a chart with both line and scatter plots and combine them both into the same tooltip like so:
In highchart 3.0.7 this no longer works. As can be seen in the tooltip below wind dir is not displayed. Win dir is a scatter plot, the others are areaspline:
The tooltip code:
tooltip: {
crosshairs: true,
shared: true,
formatter: function() {
var s = '<b>' + Highcharts.dateFormat('%H%M %p %a %b %e', this.x) + '</b>';
$.each(this.points, function(i, point) {
s += '<br/>' + point.series.name + ': ' + point.y + (this.series.name == 'Wind Dir' ? ' degrees' : ' mph');
});
return s;
}
}
See complete example here.
How can the tooltip in 3.0.7 be made to behave like in 2.2?
A simple workaround is to change the scatter plot to a line plot and set linewidth = 0 and enable marker for the line plot. This way it will look like the scatter plot in the example, but support tooltip.shared.
Edit: note that the actual property is camelCase: lineWidth: 0
In my case, I was looking for something like the error bar chart, but with a few changes:
Share the same yAxis (both column and error are about the same nature)
No errorbar margin for the columns (but need to keep them for the dots)
Use of scatter instead of spline (since the y's aren't connected through time)
So, from the Highcharts' error bar fiddle, I came up with the same broken tooltip fiddle for my case.
Digging at the problem, I found that as per Highcharts' shared tooltips documentation:
Tooltip texts for series types with ordered data (not pie,
scatter, flags etc) will be shown in a single bubble.
So, it really don't make sense to expect a shared tooltip for the scatter option.
As a solution, I came up with the very same OP's solution.
Set the type as spline (even it doesn't make much sense at first) and remove the line by setting lineWidth: 0 to appear like a scatter plot, so it is simulated something like an ordered scatter plot chart, as shown in this working fiddle.
Sometimes it is very difficult to get the Highcharts Javascript charting library to show a tool tip for certain data points. For example, try to show the tooltip of the data point at 50,50 on the below link. It is very difficult to get it to show, and it flickers a lot. Does anyone know about some workaround?
http://highcharts.com/jsbin/ogixaz/2/edit
I tried it with an update-to-date Chrome and Firefox.
have you tried:
//...
plotOptions:{
series:{
stickyTracking:true;
}
}
UPDATE:
I have to say that i looked at your embeded example and understood exactly what you meant,
but after moveing your code into the jsFiddle and setting the property shared:true (in the tooltip object), it works fine. check it... http://jsfiddle.net/yoav_barnea/LFvVy/2/
the important part is the property shared:true :
tooltip: {
formatter: function() {
return '<b style="font-size:18px;font-weight:bold;">Some very long title</b><br/>' + this.x + ":" + this.y + " <br/>and some<br/> extra stuff<br/>line<br/>line";
},
useHTML: true,
shared:true
},
UPDATE 2:
as for your other problem on getting the costom c property (that you mentioned in the comment...), the solution for that is to fix your code inside the formatter function into somthing like this: return ... this.points[0].point.c
(again, this was a new issue, not related to the first one of flickering tooltip...)
The reason the tooltip at 50,50 flickers is because the tooltip is being drawn over the point. The points to the left and right allow room for the tooltip to be drawn to the side. The reason the middle one can't be drawn to the side is that the chart is small, and the toolip is big.
Some ideas to help this situation:
1. Making the tooltip smaller.
2. Make the chart bigger (try making the right hand side bigger in your example).
3. Use the highcharts tooltip.positioner function to place the tooltip somewhere else.