i'm using Highcharts , the chart result is a collection of SVG elements and i was trying to add some elements to this SVG using jquery

Here is what i have tried

function(chart) { // on chart load plete 
  $("#highcharts-0 Svg").
   append(document.createElementNS("", "rect"));
   $("#highcharts-0 Svg").find("rect").
   attr({x : 100 , y:100 , width : 100 , height : 100 });
   console.log($("#highcharts-0 Svg "));
                  });

i can't really say if this is working or not , all i can see is a <rect></rect> element in my DOM with no attr another notice is when i hover on this element using chrome console it shows the rec on x-0 , y=0,

i have an idea that jquery does not append svg elements hop i'm wrong

Question How can i add element with attributes to SVG using jquery

EDIT

with help now i have id for the rect element then i tried to add attr with using the id , but failed

ScreenShot

i'm using Highcharts , the chart result is a collection of SVG elements and i was trying to add some elements to this SVG using jquery

Here is what i have tried

function(chart) { // on chart load plete 
  $("#highcharts-0 Svg").
   append(document.createElementNS("http://www.w3/2000/svg", "rect"));
   $("#highcharts-0 Svg").find("rect").
   attr({x : 100 , y:100 , width : 100 , height : 100 });
   console.log($("#highcharts-0 Svg "));
                  });

i can't really say if this is working or not , all i can see is a <rect></rect> element in my DOM with no attr another notice is when i hover on this element using chrome console it shows the rec on x-0 , y=0,

i have an idea that jquery does not append svg elements hop i'm wrong

Question How can i add element with attributes to SVG using jquery

EDIT

with help now i have id for the rect element then i tried to add attr with using the id , but failed

ScreenShot

• javascript
• jquery
• svg
• raphael
• highcharts

3 Answers 3

Highcharts also has a drawing API that you can use to draw rectangles. This works also for VML. Check out http://www.highcharts./ref/#renderer => rect and live sample at http://jsfiddle/gh/get/jquery/1.7.1/highslide-software/highcharts./tree/master/samples/highcharts/members/renderer-rect-on-chart/.

As you can see here, there're no attributes rx and ry, try to change it to x and y.

Rectangles have x and y attributes. rx and ry are used on circles.

Also, are you sure your selector is correct? You might want to lowercase the 'Svg'

** edit ** The rect in your screenshot doesn't have any of the attributes assigned. There's no width or height, or x/y positions. You should try giving the rectangle an id when appending it, and querying for it using that same id.

See: https://developer.mozilla/en/DOM/document.createElementNS

You can do it like this:

var rect = document.createElementNS("http://www.w3/2000/svg","rect");
rect.id = 'your_id_here';

Then append the rect through the normal route.

Note that, since you have the raw dom element, you might be able to assign your other properties there as well. e.g.:

rect.x = 100;
rect.y = 100;
rect.fill = 'blue';