Here’s a plugin that works with columns as well: http://jsfiddle.net/highcharts/Ha3Wr/
It works by setting the opacity on the group element. I don’t expect it to work in legacy IE though.
@Anonymous The plugin works for all-line charts too: http://jsfiddle.net/Ha3Wr/57/
@Ke Zhao I updated the plugin to work also with pies. Please reload the jsFiddle now.
Great, I'm happy to hear you figured it out! If you can share it in jsFiddle it would be nice.
Not yet sure I grasp it fully, but maybe we can make it work somehow by using different axes? For example, we can use two y axes and/or two X axes and plot each waterfall series to different places.
Thanks for your suggestion! Do you have a sketch or a screenshot of what you have in mind?
Hi, this feature is prevented in two places, because there were problems with text being selected when trying to zoom in. See https://github.com/highcharts/highcharts/issues/3224.
If you want to enable text selection, there are two lines where the event handling is prevented. If you comment out both these lines, your users can select text:
It works for me. I've updated the links in the status with the correct locations in v5.0.14.
Thanks for your contribution!
The key is setting useHTML to true: http://jsfiddle.net/highcharts/8FSp6/.
Here’s another approach, allowing true SVG images: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/axis-label-images/. The advantage of using SVG is that these images willl be visible in the exported chart as well.
Hi Michael, I've updated the snippet to a more general approach that looks at the label's actual position. Now it also works with polar. You may want to adjust the exact positions though: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/axis-label-images/
@sahba: It looks like the original fiddle got lost, so I created a new one. Let me know if you have any problems with it, we will keep the snippet updated.
Here’s a proposal for how you can extend Highcharts to draw a graphic for null points: http://jsfiddle.net/highcharts/FKSZ6/
In that case we need to look at the next valid value instead of the last. Here's a modified version of the plugin where we look both up and down and interpolate if both values are present: http://jsfiddle.net/highcharts/FKSZ6/
I created this small plugin that allows a pie plugin to be aligned using the regular Highcharts alignment options (align, verticalAlign, x, y).
You still need the plugin.
@jxd Dynamic updating capabilities are now added, plese see the updated jsFiddle.
Updated the demo to work with Highcharts 3.0.
We are now working on a grid axis module, which will put the labels in intervals. See http://jsfiddle.net/highcharts/gfzs5/4/ .
There's no option for using the last date of the month, but you can create your own tickPositioner callback: http://api.highcharts.com/highcharts#xAxis.tickPositioner
Posting a chart to Facebook would mean that we ad a backend to store the chart and to communicate with Facebook. Highcharts JS is a client side charting library, so this goes beyond its reach. It is up to the implementer to provide a backend for it.
Highcharts Cloud, however, has this capability. See http://cloud.highcharts.com.
We are now working on Teams in Highcharts Cloud. Besides that, as Highcharts JS concerns, it is still a client side library so share buttons is something that is beyond its scope.
@Howard I see. We are planning an option to do styling per Organization in a future release of the Highcharts Cloud.
Another option would be that you create your own chart page where the cloud chart runs in an iframe, and add share buttons that share your own page instead.
Here’s a plugin/study for the feature: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/appear/
Hi Elle, I'm afraid animation is generally disabled on the funnel chart, so we don't have a way of animating it on scrolling into view.
One possibility though is to write an animator function, for example by borrowing (and modifying) the one from geo maps: http://jsfiddle.net/qskthLe1/3/.
> Is it possible to make this an external JS file?
Of course, just take the contents of the plugin and put in a file. Make sure it is loaded after Highcharts and jQuery.
Sorry about that. I've updated the snippet so that it renders immediately when animation is not enabled, like in export.
I changed the snippet to wrap the render method rather than animate method. This seems more robust, and also works with bubbles. I added a bubble chart at the very bottom. See the updated demo.
... And here come the true gradients: http://jsfiddle.net/highcharts/sez1h3qu/
Still a bit of the transition can be seen.
Thanks for your request, this seems like an appealing visual feature. The problem with your current approach is that it adds a lot of series, which is both logically incorrect an also a performance problem.
I did some googling and also found that SVG doesn't support circular gradients like this. But we should be able to emulate it by chopping up the arcs in smaller arcs and applying a gradient to each. Six arcs (each 60 degrees) should be enough to achieve a seamless gradient.
I have to run now, but here's what I've got so far: http://jsfiddle.net/highcharts/td2v4u4z/63/
The fiddle uses more than six segments because I haven't had the time to add the actual gradients yet.
- Add gradients.
- Use fewer segments.
- Apply animation.
- Depending on how it looks when the gradient is applied, apply round line caps only to the first and last segment.
Check out this plugin: http://www.highcharts.com/plugin-registry/single/24/Indicators
SMA is simple moving average.
Thanks for the good idea! Implemented in https://github.com/highcharts/highcharts/commit/fa07d08fa93a52f3cf232fb83e089cc01093c889, it will be out with the next release. See live demo at http://jsfiddle.net/highcharts/j99skchd/2/.
Yes, we're going into regression testing phase now. It can be expected late this week or the next week.
Here’s a small drop-in snippets that stops tooltips from the mousemove event, and applies them to the click instead. Touch devices should be unaltered.
It works for me in Chrome - which browser are you using?
To work around that you can pass [e.point] to the refresh function, though it doesn't actually make the tooltip shared. It still relates only to the clicked point. http://jsfiddle.net/highcharts/8VTTH/29/
Thanks for reporting, I added a simple check for e's existance.
Currently there is no SVG element sitting behind the navigator that you can apply a style to. The closest thing you get is http://api.highcharts.com/highstock/navigator.maskInside.
Otherwise, you can create your own styled rectangle programmatically: http://jsfiddle.net/highcharts/Lm85088q/
Selection of points within a rectangle can be done with the current API, though it needs a few lines of custom code:
I've updated http://jsfiddle.net/highcharts/nsuA6/ with a working file reference.
For your problem with a large dataset, can you show us a live sample?
That's interesting, do you have anything to show us? It makes sense though, in that function you can collect all the overlapping labels and create an aggregate label, right?
Thanks for commenting!
Implementation wise, we should see this feature in combination with regular scatter series, where we could optionally cluster markers too.