It is currently Tue Jul 07, 2015 3:25 pm Advanced search

Is it possible to draw an ellipse in highcharts?

Technical support, bug reports and more.

Is it possible to draw an ellipse in highcharts?

Postby jimerik » Thu Feb 23, 2012 10:03 pm

I need to draw an ellipse, more spesifically a von mises ellipse (http://upload.wikimedia.org/wikipedia/c ... ess_2D.png)
Is there a way to do this in highcharts?

Rgds
jimerik
 
Posts: 2
Joined: Thu Feb 23, 2012 9:41 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby cailie » Fri Feb 24, 2012 10:02 am

Hi Jimerik,

Here are all the things you can draw: http://www.highcharts.com/ref/#renderer

As you can see, the ellipse or oval is not listed as one of the shapes. And the arc function supports only a constant radius. That leaves the path function. You could specify elliptical arcs in SVG (See http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands). But as the Highcharts documentation states, the path function's VML support is less flexible. The closest thing to what you want is 'curveTo', which draws a Bezier curve rather than an elliptical one (See http://www.w3.org/TR/NOTE-VML#_Toc416858391). There are techniques for approximating ellipses with Bezier curves.

Another thing you could try is to plot generated data. You could generate data with the mathematical function of your ellipse, and plot it on two spline series. That might look okay.

Good luck :)
User avatar
cailie
 
Posts: 81
Joined: Sun Aug 28, 2011 9:43 am
Location: Vancouver, BC, Canada

Re: Is it possible to draw an ellipse in highcharts?

Postby jimerik » Sun Feb 26, 2012 12:26 am

Great,

Thank you for the answer.
jimerik
 
Posts: 2
Joined: Thu Feb 23, 2012 9:41 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby bclaff » Sat Mar 17, 2012 8:29 pm

Perhaps a little late ...
Use transform to scale and rotate a circle to get your ellipse
http://jsfiddle.net/bclaff/Bdy9a/
:)
Bill
bclaff
 
Posts: 6
Joined: Sat Mar 10, 2012 10:15 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby cailie » Sun Mar 18, 2012 7:06 am

Ah... good thinking, Bill!

Thank you :)
User avatar
cailie
 
Posts: 81
Joined: Sun Aug 28, 2011 9:43 am
Location: Vancouver, BC, Canada

Re: Is it possible to draw an ellipse in highcharts?

Postby mfrere » Thu May 21, 2015 7:02 pm

This post is fairly old. I wonder if there is any update on this? Is there an easy way to draw ellipses with highcharts at this point? The jsfiddle example in Bill's answer doesn't seem to exist anymore.

Ideally, I'd like to be able to draw them in a similar way than for the current bubble chart implementation.
mfrere
 
Posts: 2
Joined: Tue Feb 18, 2014 10:43 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby KacperMadej » Fri May 22, 2015 2:47 pm

You could use renderer and add circle: http://api.highcharts.com/highcharts#Renderer.circle
Then, you can transform this newly created element as any other SVG element that can be altered via transform.
More about SVG transform: https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform

In Highchars it can be done like:
Code: Select all
chart.renderer.circle(100, 100, 50).attr({
            transform: 'rotate(20,100,100),scale(2,1)',
            [...]
}).add();


Example: http://jsfiddle.net/Lzkrt15s/1/
Kacper Madej
Highcharts support team
KacperMadej
 
Posts: 2290
Joined: Mon Sep 15, 2014 2:43 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby mfrere » Fri May 22, 2015 6:52 pm

Thanks for the quick reply and up-to-date example.
I'll see if I can get to an acceptable result using this technique. I feel like it won't be trivial to implement as it is not a series per se, nor an actual SVG ellipse. Still, your input is greatly appreciated.

Michael
mfrere
 
Posts: 2
Joined: Tue Feb 18, 2014 10:43 pm

Re: Is it possible to draw an ellipse in highcharts?

Postby KacperMadej » Mon May 25, 2015 12:17 pm

By default Highcharts do not have this feature, but it is possible to extend SVGRenderer to add new method e.g. ellipse.
Guide how to extend Highcharts: http://www.highcharts.com/docs/extendin ... highcharts
Kacper Madej
Highcharts support team
KacperMadej
 
Posts: 2290
Joined: Mon Sep 15, 2014 2:43 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: NCC1701 and 16 guests