CODEWITHSUNDEEP
javascriptjquerycsshighchartstypeerror
Gs Jassal
Gs Jassal

Reputation: 43

Unable to get width of <rect element of <svg

I am trying to access last "rect" so that I can get its width and height. I tried following jquery $(".highcharts-plot-background").width() but all I get in answer is 0. Also tried to use $(".highcharts-plot-background")[0].width() but then I get the following error

Uncaught TypeError: $(...).width() is not a function.

I am open to suggestions.

<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="710" viewBox="0 0 710 325" height="325">
  <desc>Created with Highcharts 5.0.0</desc>
  <defs>
    <clipPath id="highcharts-1">
      <rect x="0" y="0" width="636" height="238" fill="none"></rect>    </clipPath>
  </defs>
  <rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="710" height="325" rx="0" ry="0"></rect>
  <rect fill="none" class="highcharts-plot-background" x="64" y="50" width="636" height="238" style="margin:0px;"></rect>
</svg>

Upvotes: 2

Views: 713

Answers (1)

ab29007
ab29007

Reputation: 7766

Use attr("width") instead of width(). If you would have been declaring the width in the css then width() would work just fine.

See the snippet below.

console.log($(".highcharts-plot-background").attr("width"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg version="1.1" class="highcharts-root" xmlns="http://www.w3.org/2000/svg" width="710" viewBox="0 0 710 325" height="325">
  <desc>Created with Highcharts 5.0.0</desc>
  <defs>
    <clipPath id="highcharts-1">
      <rect x="0" y="0" width="636" height="238" fill="none"></rect>    </clipPath>
  </defs>
  <rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="710" height="325" rx="0" ry="0"></rect>
  <rect fill="none" class="highcharts-plot-background" x="64" y="50" width="636" height="238" style="margin:0px;"></rect>
</svg>

Upvotes: 1

Related Questions