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.
Do you mean the current configuration? We've got functionality for that in the export module, but it is not cleanly available as an API call. It is part of the getSVG function, but could probably easily be separated out as a function. It is the options that are fed to create the chartCopy.
The data table is now a feature of the data-export module. See http://jsfiddle.net/highcharts/VEs7z/3/. Notice how it updates as the chart is updated (for example by showing/hiding series).
Here’s a proof of concept of how you can draw a table programmatically: http://jsfiddle.net/highcharts/VEs7z/
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/
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
With Highcharts 4.1.10, shipping soon, we added an option to sort treemap items. Which makes it possible to create marimekko charts based on the treemap series: http://jsfiddle.net/highcharts/h2np93k1/.
This is only a partial implementation, but it may at least serve as a starting point: http://jsfiddle.net/highcharts/75oucp3b/
The X axis in that study is not very good, I recommend using the treemap approach instead: http://jsfiddle.net/highcharts/h2np93k1/
@Hari This is why it is only a partial implementation - we haven't got the X axis to work. A rough hack could be to hard code the tick positions like this: http://jsfiddle.net/highcharts/75oucp3b/10/. For the stack values I don't have a solution, other than perhaps hide the Y axis values altogether and make the column values speak for them selves.
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.
I wrote up a small plugin here that extends Highcharts to hold animation until the container is appeared. Requires the appear.js jQuery plugin: http://jsfiddle.net/highcharts/8YVUb/
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.
We will try to get custom bubble symbols implemented as a core feature as soon as possible. The Highcharts 5 architecture makes it a lot easier than it was with HC4. Here’s the progress so far: http://jsfiddle.net/highcharts/cbfh6mgy/
@Monte Shaffer, see http://jsfiddle.net/highcharts/cbfh6mgy/.
The big remaining problem now is that the "circle" symbol (default) is not actually a circle, but a rectangle with rounded corners. We have gotten away with that on scatter charts with small symbols, but the big bubbles are more revealing.
Sorry about that, see updated fiddle. I also fixed the animation thing. Animation doesn't work, but doesn't crash it either.
Currently the bubble series only supports circles. A workaround for you may be to use a scatter chart with individual marker sizes.
Note to self: To make bubbles behave like scatter in this regard, we need to
- Use Series.drawPoints instead of ColumnSeries.drawPoints
- Use individual radius
- Rewrite BubbleSeries.animate to use x, y, width and height.
- Use the markergroup to trace mouse events.
You can add a scatter series with image markers.
New experimantal implementation for Highcharts 4.1 is available at http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/alignthresholds/.
This implementation looks a the threshold on the primary axis (the one first defined), and aligns the threshold of any following axis to that of the primary axis.
It's not included in Highcharts yet. There are still an issue with how to handle cases when one of the axes' threshold is not in the scale: http://jsfiddle.net/highcharts/gkf9o1vh/.
Yes, it looks that way from the jsFiddle demo.
@Ronny It will not work with fixed tick positions, because we need to be able to modify the ticks in order to align the axes. Currently it only runs on the second axis. In order to make it run both ways, we need to do some restructuring and make the whole logic recursive, because when the first axis is handled, we don't know the extremes of the second one.
@Lukasz Currently you can't set both, as the alignThreshold plugin overwrites the alignTicks setting. But in general, if you use a smaller tickPixelInterval, the alignment gets better because it is easier to find an axis resolution that fits both data sets: http://jsfiddle.net/highcharts/y6pbqk6q/2/
It's still not perfect, as it disregards the tickPixelInterval setting.
For your solution about setting min and max explicitly. The docs explains why Highcharts adds padding to your setting: http://api.highcharts.com/highcharts#yAxis.min
@Luis Miguel: You need to supply a threshold. Lines don't have a threshold by default. http://jsfiddle.net/highcharts/jrXQe/5/
The difference is that line series don't have a threshold by default, so you need to threshold: 0 on the line series. I've fixed this in the plugin so when no threshold is given, 0 is assumed.
We appreciate the many votes - I'm afraid the train has left for 3.0, and we will have some catching up to do now before adding new features.