Fusioncharts Pie Chart No Fill Color

Question

I have created the following fiddle using fusioncharts. I am unable to understand why the fill colour of the chart is transparent.

An HTML snippet for the sample:

FusionCharts.ready(function() {
  var demographicsChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Age profile of website visitors",
        "subCaption": "Last Year",
        "startingAngle": "120",
        "showLabels": "0",
        "showLegend": "1",
        "enableMultiSlicing": "0",
        "slicingDistance": "15",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "plotTooltext": "Age group : $label<br>Total visit : $datavalue",
        "theme": "fint"
      },
      "data": [{
        "label": "Teenage",
        "value": "1250400"
      }, {
        "label": "Adult",
        "value": "1463300"
      }, {
        "label": "Mid-age",
        "value": "1050700"
      }, {
        "label": "Senior",
        "value": "491000"
      }]
    }
  });
  demographicsChart.render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>

<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->

<head>
  <base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>

Using the following chart level attributes:

"caption": "Age profile of website visitors",
"subCaption": "Last Year",
"startingAngle": "120",
"showLabels": "0",
"showLegend": "1",
"enableMultiSlicing": "0",
"slicingDistance": "15",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"plotTooltext": "Age group : $label<br>Total visit : $datavalue",
"theme": "fint"

see https://stackoverflow.com/questions/25713345/fusioncharts-not-rendering-properly-when-base-tag-included-in-html-head/55408986#55408986 — Bruno Medeiros, Mar 29 '19 at 00:52

score 0 · Accepted Answer · edited May 23 '17 at 12:22

The problem is due to the usage of base tag in HTML head.

As explained here:

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 on a page.

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

Nevertheless FusionCharts provides a solution for this. Use 'FusionCharts.options.SVGDefinitionURL='absolute';' in your javascript code to fix this. You might refer to the this fiddle or check the snippet below:

FusionCharts.ready(function() {
  FusionCharts.options.SVGDefinitionURL = 'absolute';
  var demographicsChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Age profile of website visitors",
        "subCaption": "Last Year",
        "startingAngle": "120",
        "showLabels": "0",
        "showLegend": "1",
        "enableMultiSlicing": "0",
        "slicingDistance": "15",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "plotTooltext": "Age group : $label<br>Total visit : $datavalue",
        "theme": "fint"
      },
      "data": [{
        "label": "Teenage",
        "value": "1250400"
      }, {
        "label": "Adult",
        "value": "1463300"
      }, {
        "label": "Mid-age",
        "value": "1050700"
      }, {
        "label": "Senior",
        "value": "491000"
      }]
    }
  });
  demographicsChart.render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- A pie3D Chart showing percentage visiting for different age groups last year in Harry's Supermart website. Attribute : # showPercentValues set to 1 to show the values w.r.t percentage of total visits. -->

<head>
  <base href="/">
</head>
<div id="chart-container">FusionCharts will render here</div>

Hope this helps.

Thanks @Ayan for the edits and pointing out the problem, you really saved me. Now I know that the cause of the problem is the base tag of my html. I can now implement using angularjs by adding the following code to my angular controller: `code eve.on('raphael.new', function () { this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, ''); });` — Noob Wizard, Aug 09 '16 at 01:40

Fusioncharts Pie Chart No Fill Color

1 Answers1