When I try to hover mouse along y-axis I observed that the tooltip is at the top but the point selected is at the bottom of the graph. This is because the point below might be the second point when we hover along the x-axis.
How do I make highcharts transverse points along the y-axis ?
Note: It is not a shared tooltip
I have tried setting the following attributes in the tooltip:
followPointer: true,
followTouchMove: true,
That is because of the default value of the findNearestPointBy option, which is 'x'. You can set it to 'y' or 'xy':
series: [{
findNearestPointBy: 'xy',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/2nqdxp3z/
API Reference: https://api.highcharts.com/highcharts/series.line.findNearestPointBy
Related
I have something similar to the Chart Js sample here where I have multiple datasets in my chart that I set as 'index.' When you hover over a point, each dataset's point matching that x-value will highlight. Is there any way to set that highlighting to work the same way as the tooltip? I want to have the points highlight when the mouse hovers over the x-axis, not just the points.
You're looking for options.hover.intersect:
if true, the hover mode only applies when the mouse position intersects an item on the chart.
The default is true so you should change it to false:
options: {
hover: {
intersect: false
}
}
In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/
Using this jsfiddle for example, I want to be able to mouse over any position on the spline and show a tooltip presenting x and y, vs. only showing a tooltip for the predefined series data points as it currently works. Is there such an option with Highcharts?
Only thing I see in the documentation would be followPointer which keeps the tooltip on the pointer but the series data points are still selected.
series: {
tooltip: {
followPointer: true
}
}
I need add another color for xAxis labels when it's hover (like number 19 in the picture). I saw this property later but I lost it.
Need a help =)
And can I set a property (z-index) for xAxis tick? Cause its color must be white, and now I can't see this color, when its z-index less than z-index chart's area.
For your first question, I would use a shared tooltip and the point mouseOver event to change the corresponding axis label:
plotOptions: {
series: {
point: {
events: {
// on mouseOver make the xaxis label red
mouseOver: function(){
var xAxis = this.series.chart.xAxis[0];
$(xAxis.ticks[this.x].label.element).css('fill','red');
},
// on mouseOut make it gray again
mouseOut: function(){
var xAxis = this.series.chart.xAxis[0];
$(xAxis.ticks[this.x].label.element).css('fill','#606060');
}
}
}
}
},
Example here.
For your second question, z index with SVG is a little tricky. It doesn't have a true zIndex you can re-order but rather it's dictated by the order in which the elements are drawn. I can't see it matters, though, because the labels are drawn on top of the chart area already (or else you wouldn't see them at all).
What I would like to do is plot a single series with two y-axes "locked" to the same data -- for instance, °F and °C temperatures (or feet and meters, etc.) that could be read off either axis, but only one set of points would be plotted.
Things I have tried:
1) Create two series, the second with the converted values, and plot on "on top" of the other (in this case, there's a constant conversion value of 1.51):
date,unit1,converted_unit2
2012-03-19,1.598333,3.108333
2012-03-20,1.542083,3.052083
2012-03-21,1.483333,2.993333
Generally works; however, Dygraphs dynamically scales both y-axes independently to be "pretty", and so the two series don't always plot directly on top of each other.
2) Set visibility of the second series to FALSE:
series: { 'converted_unit2': { axis: 'y2' } },
visibility: [true, false]
Doesn't work: Dygraphs defaults to scaling secondary y-axis for invisible series to 0-to-1.
3) OK, keep them both visible, but set the second series to transparent:
series: { 'converted_unit2': { axis: 'y2' } },
colors: ['#000080','rgba(0,0,0,0)']
This almost works -- however it has the side effect that the label for the second series in the dynamic legend is now transparent. And, since the axes are still being independently calculated to be "pretty", they are not exactly aligned -- the secondary y-axis is potentially a few percentage off the first y-axis.
(I also tried setting the second series visibility to FALSE and manually setting the second y-asix using the values obtained from yAxisRange(), which works well, but the second y-axis doesn't respond correctly to zooming the graph.)
Is there a way to easily create two y-axes for a single series which are "locked" together?
Thanks,
-bryan
same problem here ;)
we used to add a second (dependent) axis by using a single data point in a second series (which allowed a second axis) and fixed axis ranges for both axes (the second range calculated from the first range). Second color was set to transparent, second label was hidden ... worked fine until we had to switch to dynamically scaled axis ...
the second series in the dynamic legend is now transparent
hm, you can change this with css (as it's an inline style, you'll have to use !important to override it) or js (remove the inline style or change it).
Yes, an option for a second (dependent) axis would be great!
Jean
Set the stroke width of the second series to 0:
series: {
converted_unit2: {
axis: 'y2',
strokeWidth: 0
},
}