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
}
}
Related
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
I'm not sure if this is possible, but I have separate, stacked highcharts. I'd like to keep them on the same graph, but stacked on top of each other, resetting the y axis to 0 each time. Here is a Fiddle of them all separate:
I've also attached an example graph of what I am imagining. The blue horizontal lines represent each new chart series's 0 point.
Sample graph example
//random line so it will let me post the fiddle. Ignore this
You can also achieve a similar effect using different height of multiple yAxis.
Example:
http://jsfiddle.net/6b9prwjc/
You are making highchart for each series in the array seriesAll by looping through it and that is causing it to create seperate charts for each series. If you just create 1 highchart and give it the series array, it will plot all the series on the same chart. Here is a modified version of your code to give you what your looking for.
https://codepen.io/Nasir_T/pen/zdzdrW
Also please check out the docs of highcharts and it will give you all the information you need. E.g. here is the combined charts link:
https://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
[Edit for stacking option]
You can also stack them on top of each other by setting the plotOption > series > stacking properties. e.g.
plotOptions: {
series: {
stacking: 'normal'
}
}
Learn more on stacking in the following doc link.
http://api.highcharts.com/highcharts/plotOptions.area.stacking
Hope this helps.
Problem:
When series of the charts are set hidden and visible by clicking the legends the YAxis on right side do not render properly:
enter code here
http://jsfiddle.net/yzqdekhr/5/
Steps To Reproduce:
1) Click Diversion % Monthly Legend and Hide right side y axis
2) Click on both Diverted Tons and Trash Tons Legend (Complete chart will be blank)
3) Click Diversion % Monthly Legend to show it again
4) Click both Diverted Tons and Trash Tons Legend to show chart data
See now both axis have their own plotlines which should not be, see below image
Expected Result
Plot lines must be common as in the first load
This is a known issue reported as a bug here - https://github.com/highslide-software/highcharts.com/issues/4374
Suggested workaround is to add a wrapper that will realign ticks.
H.wrap(H.Axis.prototype, 'setScale', function(p) {
if(this.options.alignTicks !== false || this.chart.options.alignTicks !== false) {
this.forceRedraw = true;
}
p.call(this);
});
})(Highcharts)
JSFiddle example: http://jsfiddle.net/q6sr1c0f/
The problem is with how the secondary axis acts - when removing all and drawing the Diversion % there is no data or primary axis to be dynamically linked to.
The only way I can think of doing what you want without getting the double axis line is to set the second Yaxis linkedTo option to the first one.
This will make sure that if there is no first Yaxis the plot will not render new lines. This present another problem because now the Diversion % line is not painted at all (if the others are not visible) so you will have to set a min and max value for the first Yaxis.
JSnippet Demo
//Added to the second Yaxis:
linkedTo: 0;
//Added to the first Yaxis:
min: 0;
max: 100;
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
},
}
Adding series dynamically introduce gap in the existing series.
http://jsfiddle.net/anandc999/6XRuY/
Steps to reproduce
1. load the above url
2. click any where in the candlestick (OHLC)
3. move the mouse with in the candlestick
4. click again with in the candlestick chart
Observe a new series is added but a gap is introduced in the existing Volume and OHLC series.
How to add series without a gap?
Already tried gapsize and connectNulls but doesnt work. Can anybody help?
Thanks
Anand
The problem is with ordinal axis in Highstock. This option forces to display points evenly on a chart, so when new points are added - it recalculates position of each points.
To prevent that set ordinal: false, see example: http://jsfiddle.net/6XRuY/7/
Code:
xAxis: {
ordinal: false
},