title: FusionCharts not rendering properly when <base> tag included in HTML head
body: <p>I'm using <code>AngularJS</code> and <code>FusionCharts</code> together in my web application. The upcoming release of AngularJS v1.3.0 <a href="https://docs.angularjs.org/error/$location/nobase" rel="nofollow noreferrer">will require there to be a <code>&lt;base&gt;</code> tag in the HTML head</a>, so as to resolve all relative links, regardless of where the app is hosted in the site's directory.</p>
  
  <p>When including the <code>&lt;base&gt;</code> tag with the latest version of FusionCharts (currently v3.4.0), the 3D charts do not render properly. For example, a 3D pie chart appears and has rotation and clickable slices, as well as tooltips and color on the inside edges of the slices. However, the entire outer color is black.<img src="https://i.stack.imgur.com/RLChe.png" alt="enter image description here"></p>
  
  <p>Excluding the <code>&lt;base&gt;</code> tag causes the chart to look and behave normally.</p>
  
  <p>Does anyone have any idea how to resolve this? Unfortunately, I don't own the source code, otherwise I'd hack at it myself.</p>
  
  <p>Here's the link to the non-working jsFiddle: <a href="http://jsfiddle.net/aaronaudic/59Bmf/207" rel="nofollow noreferrer">http://jsfiddle.net/aaronaudic/59Bmf/207</a></p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>I originally awarded the correct solution to @pankaj, because his solution of simply adding the following line at page load seemed to fix the problem:</p>
  
  <pre><code>document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);
  </code></pre>
  
  <p>However, this only works if the charts are on the initially-loaded page (when user navigates directly to page with the charts); when navigating to the page by way of something like <code>ui-router</code>, I was still seeing black.</p>
  
  <p><strong>The correct answer is from @Shamasis</strong>. Adding the following to the page load will fix the issue application-wide:</p>
  
  <pre><code>eve.on('raphael.new', function () {
      this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
  });
  </code></pre>
  
  <p>His original caveat mentioned that the export functions may be hampered from the Cloud, and this may be (I don't export from the cloud). However, exporting locally, as can be observed in this jsFiddle, works perfectly well: <a href="http://jsfiddle.net/aaronaudic/Gs6sN/14" rel="nofollow noreferrer">http://jsfiddle.net/aaronaudic/Gs6sN/14</a> </p>
  
  <p>My base tag, in the head of the page, is simply:</p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>