Fusioncharts graphs are not rendering when the tab is not active - Angular

Question

EDIT: Now I am getting the data properly by adding an *ngIf condition for graph component. But, the chart getting rendered, not getting any fill color. The fill URL getting is

fill="url('http://localhost:4200/#rr-1272-xr___89_110_110__rgba_118_193_134_0.9__78-rgba_118_193_134_0.9__89')"

OLD:(Found solution) In my application, the Fusioncharts graphs are not rendering when the tab is not active. Even when the tab comes to active, the graphs are not rendering. Showing No data to display message as follows

HTML:

<section class="">
        <!-- fusion chart starts here -->
            <fusioncharts   width="220" height="220" type="doughnut2d"
                [dataSource]="dataSource" dataFormat="json" SVGDefinitionURL='absolute'>
            </fusioncharts>
        <!-- fusion chart ends here -->
</section>

Component:

let xyz = {
    chart: {
        "bgColor": "#ffffff",
        "startingAngle": "310",
        "showLegend": "0",
        "defaultCenterLabel": this.returnValue(this.chartData) + "\n" + "Total",
        // "centerLabel": "$value" + "\n" + "$label",
        "centerLabelBold": "0",
        "showTooltip": "0",
        "theme": "fusion",
        "minAngleForValue": "75",
        "enablesmartLabel": "0",
        "showLabels": "0",
        "showValues": "0",
        "enableMultiSlicing": "0",
        "showBorder": "0",
        "showPlotBorder": "1",
        "plotBorderColor": "#ffffff",
        "plotBorderThickness": "5",
        // "legendPosition": "RIGHT",
        "doughnutRadius": "70",
        "paletteColors": "#6C7DED,#3CA653,#FFAB27,#3AC9E9,#6C7DED,#0C8455,#FDCF12,#76E4FC",
        "animateClockwise": "0",
        "chartLeftMargin": "0",
        "chartRightMargin": "0",
        "chartTopMargin": "0",
        "chartBottomMargin": "0",
        "captionPadding": "0",
        "slicingDistance": "0",
        "plotHoverEffect": "1",
        "centerLabelFontSize": "20",
        "centerLabelFont": "DroidSans",
        "centerLabelColor": "#222222",
    },
    data: [
        {
            "label": "Pilot",
            "id": "Pilot",
            "value": 5,
            "color": "#3CA653",
            "link": "studies?studies-by-phase=Pilot"
        },
        {
            "label": "Pivotal",
            "id": "Pivotal",
            "value": 2,
            "color": "#FFAB27",
            "link": "studies?studies-by-phase=Pivotal"
        },
        {
            "label": "Phase 1",
            "id": "Phase 1",
            "value": 4,
            "color": "#3AC9E9",
            "link": "studies?studies-by-phase=Phase 1"
        },
        {
            "label": "Phase 2",
            "id": "Phase 2",
            "value": 3,
            "color": "#6C7DED",
            "link": "studies?studies-by-phase=Phase 2"
        }
    ]
};
this.dataSource = { ...xyz };

Please help me solve this issue.

Thank you...

score 0 · Answer 1 · answered Jun 23 '20 at 05:43

0

In the module.ts file add SVGDefinitionURL as absolute instead of adding in component.html

FusionCharts.options['SVGDefinitionURL'] = absolute;

answered Jun 23 '20 at 05:43

Zapdos13

855
1
8
14

Thanks for your response. I tried that too. But, no luck. – Sai M. Jun 23 '20 at 10:40
Please refer the link - https://stackoverflow.com/a/55408986/7404858 – Zapdos13 Jun 23 '20 at 12:07

Fusioncharts graphs are not rendering when the tab is not active - Angular

1 Answers1