I know this question has been asked before and I have used heavily a lot of the answers provided by others but am still not 100% the way there.
I want all series lines to be grey and one mouseOver of the line, "turn on" their color, on mouseout revert back to grey.
Ive got this partially working here however there are some obvious issues:
I know, Ive hardcoded the series array position. I couldnt figure out how to determine what series the mouse was on. Whats the best way to do this?
plotOptions: {
series: {
events: {
mouseOver: function() {chart.series[0].graph.attr('stroke', '#0000FF');
$report.html('Moused over')
.css('color', 'green');
},
mouseOut: function() {chart.series[0].graph.attr('stroke', '#C0C0C0');
$report.html('Moused out')
.css('color', 'red');
}
}
}
}
Mouseout isnt triggered until the cursor leaves the chart area. How do I track mouse events more precisely for series lines?
Any improvement to my current code is highly appreciated.
You can use:
this.graph.attr('stroke', '#0000FF');
instead of hard coding a series:
http://jsfiddle.net/jlbriggs/f3Wq2/5/
I had something similar going a while back, using checkboxes rather than mouseover events. Just in case there's anything in it that's helpful:
http://jsfiddle.net/jlbriggs/57SR9/21/
I believe this example may be the solution for the mouseout issue:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-events-mouseover-no-sticky/
This paramter may be what you need:
stickyTracking: false,
And in the docs:
http://api.highcharts.com/highcharts#plotOptions.series.events.mouseOut
Related
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
Please have a look at this jsFiddle.
For some reason the fillColor on hover behaves in a strange way (try to hover on any of the bubbles in the lower part). Even bubbles belonging to the same series get a different hover color.
As I need to have a halo coherent with the color of the bubble I do something like:
states: {
hover: {
halo: {
attributes: {
fill: Highcharts.Color(colors.BottomRight).setOpacity(0.5).get('rgba')
}
}
}
}
And it works for the halo. I never specify the hover fillColor. I also tried to specify it but it ignores me.
The data series are copy paste, so no error is possible between them (then I changed the data of course).
I suspect this a bug. Can anybody confirm?
Thank you!
SN
I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.
I am using Highstock charts with single series having flags on it where x-axis is 'datetime' type and y-axis is any numerical value. Now initially when chart loads I provide bit of padding on x-axis using attribute "max" so that end point doesn't touch the edge (which is working fine) but as I drag the navigator, the padding gets lost and the point touches the edge.
Is there any way of maintaining that padding on graph line even after I drag the navigator?
Any help would be greatly appreciated...
Unfortnately maxPadding works only for first time, as you ddescribed, but you can catch adterSetExtremes and then (setExtremes](http://api.highcharts.com/highstock#xAxis.events.setExtremes) to modify range on chart.
Thanks a lot Sebastian Bochan.....It worked for me!!!!. Just in case if anyone needs it. Here is what I have done
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
Padding_value is a variable proving padding every time navigator is triggered
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.