FusionCharts not rendering properly when <base> tag included in HTML head

Question

I'm using AngularJS and FusionCharts together in my web application. The upcoming release of AngularJS v1.3.0 will require there to be a <base> tag in the HTML head, so as to resolve all relative links, regardless of where the app is hosted in the site's directory.

When including the <base> 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.

Excluding the <base> tag causes the chart to look and behave normally.

Does anyone have any idea how to resolve this? Unfortunately, I don't own the source code, otherwise I'd hack at it myself.

Here's the link to the non-working jsFiddle: http://jsfiddle.net/aaronaudic/59Bmf/207

SOLUTION:

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:

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

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 ui-router, I was still seeing black.

The correct answer is from @Shamasis. Adding the following to the page load will fix the issue application-wide:

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

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: http://jsfiddle.net/aaronaudic/Gs6sN/14

My base tag, in the head of the page, is simply:

<base href="/">

Answer 1

The issue is not primarily with FusionCharts - it is a generic SVG issue. In SVG, when gradient colour is applied on an element, it actually "refers" to another gradient element on the page. This is somewhat similar to how links can refer to hashtags using <a id="hash" /> on a page.

Now, when you are setting a <base> to the page, the references are going haywire. The gradients now refer to an element with URL as provided in your base tag.

One way to fix this is to access the internal graphics renderer and hard-set the URL to the absolute location of the page. The way to do that would be to access RedRaphael object within FusionCharts core and set the _url variable for the same.

The following code should do it for you.

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

The only caveat is that specifying absolute URL as reference to gradient elements does not work in some older browsers (I'm not sure exactly - could be Safari 5 or FF 3.0). It may also have some negative impact while exporting FusionCharts as image - the relative URLS will be invalidated when the SVG is rasterised on FusionCharts Cloud Export servers.

Answer 2

I'm fixing this problem on Angular 7 and FusionCharts here, FusionCharts.options.SVGDefinitionURL='absolute' didn't help much. It fixed Safari, but just on the first route with pie charts. Any further navigation would break again, and now Chrome is also broken after navigating.

I considered the Raphael workaround, but couldn't find a way to get a eve reference, so I decided to try removing the baseHref, which seems to be the "cause" of the problem.

Here is what I did:

1. Removed the base from index.html (left it there commented so everyone knows why) and also put the favicon as an absolute resource.

    <!-- Configuring deployUrl and APP_BASE_HREF in the main module, 
         see [[this stackoverflow link]] -->
    <!--<base href="/">-->
    ...
    <link rel="icon" type="image/x-icon" href="/favicon.ico">

2. Configured deployUrl on angular.json (see this question)

I'm using multiple projects layout here, so for me it was added on path projects.my-project.architect.build.options.deployUrl, should be simpler in the default project.

    "deployUrl": "/",

3. Configured my app module to inject the configuration for the router (docs)

import { APP_BASE_HREF } from '@angular/common'
...

@NgModule({
    ...
    providers: [
        { provide: APP_BASE_HREF, useValue: '/' },
        ...
    ],
    ...
})

Everything looks good now, all browsers work, Angular router seems to be working fine as well.