allow for custom symbols when using bubble chart
Allow for custom symbol with bubble chart, such as square triangle etc. Works wondefully with scatter but when you switch to bubble you're forced to used the round ones.
Marker symbols setting has been added to Highcharts version 5.0.7
https://www.highcharts.com/blog/changelog/#highcharts-v5.0.7
Relevent API refenrece: https://api.highcharts.com/highcharts/series.bubble.marker.symbol
-
Monte Shaffer commented
I posed this question on stackoverflow: http://stackoverflow.com/questions/41151606/highcharts-bubble-graph-custom-marker/41168009#41168009
And this was a nice solution: https://jsfiddle.net/kx62dztf/2/
It is a star.
The challenge moving foward: bubbles on the 3-d scatter plot with 3-d shapes / images...
-
@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.
-
Monte Shaffer commented
What about a url (size w, h based on previous radius)?
-
Joseph Pontone commented
Awesome! Works perfectly. Thank you
-
Thiago commented
That did the trick, thanks again, i appreciate the quick response on this!
-
Sorry about that, see updated fiddle. I also fixed the animation thing. Animation doesn't work, but doesn't crash it either.
-
Thiago commented
Thanks for the plugin! I noticed that zooming in doesn't work in your fiddle nor in my test environment.
I get this: "Uncaught RangeError: Maximum call stack size exceeded"
-
Thiago commented
Does this work on any version of highcharts?
-
Thiago commented
Is it possible to change the bubble symbol from a bubble to a square or triangle? I see that this is possible in scatterplot, but has it been implemented for bubble charts? Are there any workarounds?
We are using highcharts-more-2.0.1.js and highstock-2.0.1.js
Thanks,
Thiago -
Currently the bubble series only supports circles. A workaround for you may be to use a scatter chart with individual marker sizes.
-
Pawan Ingale commented
do we have any option for custom marker in bubble chart?
-
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. -
Thang commented
Yep, I would like to place custom Image / SVG image as Map Pins instead of bubble
-
shubhankar commented
i need to implement the square symbol in bubble high chart is there any way to implement that ?
-
You can add a scatter series with image markers.
-
Jens Unger commented
nice idea. I also would like to use custom symbols with external graphics, such as country flags in the bubble chart.