TypeError: Cannot read property 'addSymbol' of undefined

Question

I am trying to implement an Msstackedcolumn2dlinedy from FusionCharts i have added static data for this chart for now but i am getting error in the console as described in title. Here is detail of error.

TypeError: Cannot read property 'addSymbol' of undefined at helper.js:1 at Module../node_modules/@fusioncharts/core/src/toolbox/tools/helper.js (helper.js:1) at webpack_require (bootstrap:84) at Module../node_modules/@fusioncharts/core/src/toolbox/tools/tool.js (tool.js:1) at webpack_require (bootstrap:84) at Module../node_modules/@fusioncharts/core/src/toolbox/tools/scrollbar/index.js (index.js:1) at webpack_require (bootstrap:84) at Module../node_modules/@fusioncharts/core/src/toolbox/tools/index.js (index.js:1) at webpack_require (bootstrap:84) at Module../node_modules/@fusioncharts/core/src/toolbox/index.js (index.js:1) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)

In my module this is how i imported it

import * as FusionCharts from "fusioncharts";
import * as charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { FusionChartsModule } from "angular-fusioncharts";
import * as TimeChart from "fusioncharts/fusioncharts.timeseries";
import * as Msstackedcolumn2dlinedy from "fusioncharts/msstackedcolumn2dsplinedy";
import * as Gammel from "fusioncharts/themes/fusioncharts.theme.gammel";

FusionChartsModule.fcRoot(FusionCharts, Msstackedcolumn2dlinedy, FusionTheme);

@NgModule({
declarations: [
    ParcelsCombinationChartsComponent
],
imports: [
    FusionChartsModule
]
})

In my component.ts file

data: any;
    width = 100;
    height = 400;
    type = "msstackedcolumn2dlinedy";
    dataFormat = "json";
    dataSource: any;

    constructor() {}

    ngOnInit() {
        this.data = {
            chart: {
                caption:
                    "Market Share of Korean Automobile Manufacturers in US",
                subcaption: "2011 - 2016",
                pyaxisname: "Units Sold",
                syaxisname: "% of total market share",
                snumbersuffix: "%",
                syaxismaxvalue: "25",
                theme: "fusion",
                showvalues: "0",
                drawcrossline: "1",
                divlinealpha: "20"
            },
            categories: [
                {
                    category: [
                        {
                            label: "2011"
                        },
                        {
                            label: "2012"
                        },
                        {
                            label: "2013"
                        },
                        {
                            label: "2014"
                        },
                        {
                            label: "2015"
                        },
                        {
                            label: "2016"
                        }
                    ]
                }
            ],
            dataset: [
                {
                    dataset: [
                        {
                            seriesname: "Honda City",
                            data: [
                                {
                                    value: "997281"
                                },
                                {
                                    value: "1063599"
                                },
                                {
                                    value: "1063964"
                                },
                                {
                                    value: "1152123"
                                },
                                {
                                    value: "1289128"
                                },
                                {
                                    value: "1394972"
                                }
                            ]
                        },
                        {
                            seriesname: "Honda Civic",
                            data: [
                                {
                                    value: "196354"
                                },
                                {
                                    value: "259493"
                                },
                                {
                                    value: "234755"
                                },
                                {
                                    value: "205717"
                                },
                                {
                                    value: "205081"
                                },
                                {
                                    value: "224978"
                                }
                            ]
                        }
                    ]
                },
                {
                    dataset: [
                        {
                            seriesname: "Hyundai Verna",
                            data: [
                                {
                                    value: "373709"
                                },
                                {
                                    value: "391276"
                                },
                                {
                                    value: "380002"
                                },
                                {
                                    value: "411456"
                                },
                                {
                                    value: "476001"
                                },
                                {
                                    value: "500537"
                                }
                            ]
                        },
                        {
                            seriesname: "Hyundai Sonata",
                            data: [
                                {
                                    value: "47548"
                                },
                                {
                                    value: "73130"
                                },
                                {
                                    value: "107659"
                                },
                                {
                                    value: "179783"
                                },
                                {
                                    value: "202390"
                                },
                                {
                                    value: "156107"
                                }
                            ]
                        }
                    ]
                }
            ],
            lineset: [
                {
                    seriesname: "Market Share %",
                    plottooltext:
                        "Total market share of Korean cars in $label is <b>$dataValue</b> in US",
                    showvalues: "0",
                    data: [
                        {
                            value: "17.74"
                        },
                        {
                            value: "19.23"
                        },
                        {
                            value: "15.43"
                        },
                        {
                            value: "12.34"
                        },
                        {
                            value: "15.34"
                        },
                        {
                            value: "21.17"
                        }
                    ]
                }
            ]
        };
        this.dataSource = this.data;
    }

In html file

<fusioncharts *ngIf="dataSource !== undefined" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
</fusioncharts>

Answer 1

You can try with below code -

// Setup needed in app.module.ts

import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load fusion theme
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'


// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FusionChartsModule
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

// in app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent {
     dataSource: {
      "chart": {
        "caption": "Quarterly Sales vs. Profit % in Last Year",
        "subcaption": "Product-wise Break-up - Harry's SuperMart",
        "xAxisName": "Quarter",
        "pYAxisName": "Sales",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "numbersuffix": "M",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "25",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineDashed": "1",
        "divLineDashLen": "1",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
          "dataset": [{
              "seriesname": "Processed Food",
              "data": [{
                  "value": "30"
                },
                {
                  "value": "26"
                },
                {
                  "value": "33"
                },
                {
                  "value": "31"
                }
              ]
            },
            {
              "seriesname": "Un-Processed Food",
              "data": [{
                  "value": "21"
                },
                {
                  "value": "28"
                },
                {
                  "value": "39"
                },
                {
                  "value": "41"
                }
              ]
            }
          ]
        },
        {
          "dataset": [{
              "seriesname": "Electronics",
              "data": [{
                  "value": "27"
                },
                {
                  "value": "25"
                },
                {
                  "value": "28"
                },
                {
                  "value": "26"
                }
              ]
            },
            {
              "seriesname": "Apparels",
              "data": [{
                  "value": "17"
                },
                {
                  "value": "15"
                },
                {
                  "value": "18"
                },
                {
                  "value": "16"
                }
              ]
            }
          ]
        }
      ],
      "lineset": [{
        "seriesname": "Profit %",
        "showValues": "0",
        "data": [{
            "value": "14"
          },
          {
            "value": "16"
          },
          {
            "value": "15"
          },
          {
            "value": "17"
          }
        ]
      }]
    };

    constructor () {
    }
}

//in app.component.html

<fusioncharts
    width="600" 
    height="400"
    type="msstackedcolumn2dlinedy"
    [dataSource]=dataSource>
</fusioncharts>

Docs - https://fusioncharts.github.io/angular-fusioncharts/#/ex3

https://www.fusioncharts.com/charts/combination-charts-dual-y/dual-axis-stacked-area-and-line-chart?framework=angular4