CODEWITHSUNDEEP
javascriptjquerysvghighcharts
kmas
kmas

Reputation: 6439

How can I add a <path> element in a <g> element in Highcharts

I want to add these elements in my chart/svg : 

<g
   transform="matrix(1.25,0,0,-1.25,175.4,27)">
  <path
     d="M 0,0 -4.252,-11.338 -4.252,0 0,0 z"
     style="fill:#711f1c;fill-opacity:1;fill-rule:nonzero;stroke:none"
     />
</g>

I have used the renderer (in the chart > event > load ):

window.chart_myid = new Highcharts.Chart({
 chart: {
  events : {
   load : function(){
     this.renderer.g("myshape")
     .attr({
         "transform" : "matrix(1.25,0,0,-1.25,175.4,27)"
        })
     .add();

     this.renderer.path(['M', 0, 0, 'L', -4.252, -11.338, -4.252, 0, 0, 0, 'z'])
    .css({
        'fill' : '#711f1c',
        'fill-opacity' : '1',
        'fill-rule' : 'nonzero',
        'stroke' : 'none'
    })
    .add("myshape");
   }
  }
 }

The result is :

<g class="highcharts-myshape" 
   transform="matrix(1.25,0,0,-1.25,175.4,27)"/>
<path 
   fill="none" 
   d="M 0 0 L -4.252 -11.338 -4.252 0 0 0 z" 
   style="fill:#711f1c;fill-opacity:1;fill-rule:nonzero;stroke:none;"
/>

How can I add the <path> element into the <g> element ?

Upvotes: 0

Views: 642

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

you need to pass the g element, not its name to the add i.e.

 var g = this.renderer.g("myshape")
 .attr({
     "transform" : "matrix(1.25,0,0,-1.25,175.4,27)"
    })
 .add();

 this.renderer.path(['M', 0, 0, 'L', -4.252, -11.338, -4.252, 0, 0, 0, 'z'])
.css({
    'fill' : '#711f1c',
    'fill-opacity' : '1',
    'fill-rule' : 'nonzero',
    'stroke' : 'none'
})
.add(g);

Upvotes: 3

Related Questions