fusioncharts react error loading chunks failed

Question

import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import React from 'react';


// Resolves charts dependancy
charts(FusionCharts);

const dataSource = {
  chart: {
    caption: "Amazon Prime Video Categorization",
    theme: "fusion",
    viewmode: "1",
    showrestorebtn: "0",
    valuefontcolor: "#FFFFFF",
    yaxismaxvalue: "1000",
    yaxisminvalue: "0",
    divlinealpha: "0"
  },
  dataset: [
    {
      data: [
        {
          id: "01",
          label: "Home",
          x: "50",
          y: "900",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "02",
          label: "TV Shows",
          x: "20",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "02.1",
          label: "Thriller",
          x: "2",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "02.2",
          label: "Drama",
          x: "12",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "02.3",
          label: "Comedy",
          x: "22",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03",
          label: "Movies",
          x: "50",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "03.1",
          label: "Drama",
          x: "35",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.2",
          label: "Action",
          x: "45",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.3",
          label: "Horror",
          x: "55",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "03.5",
          label: "Thriller",
          x: "65",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "04",
          label: "Kids",
          x: "80",
          y: "500",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "04.1",
          label: "Fantasy",
          x: "80",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        },
        {
          id: "04.2",
          label: "Anime Cartoons",
          x: "90",
          y: "100",
          shape: "rectangle",
          width: "60",
          height: "40"
        }
      ]
    }
  ],
  connectors: [
    {
      stdthickness: "1.5",
      connector: [
        {
          from: "01",
          to: "03",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01",
          to: "04",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01",
          to: "02",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01.02",
          to: "04",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "01.01",
          to: "02",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "02",
          to: "02.3",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.3",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.4",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.5",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "03",
          to: "03.6",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "04",
          to: "04.1",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        },
        {
          from: "04",
          to: "04.2",
          arrowatstart: "0",
          arrowatend: "1",
          alpha: "100"
        }
      ]
    }
  ]
};

export default class HeatMap extends React.Component {
  render() {
    return (
      <ReactFusioncharts
        type="dragnode"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }
}

Here i am using fusioncharts with react.

But i am getting below error in my console.

errors:

Uncaught SyntaxError: Unexpected token <
fusioncharts.js:2202 Uncaught (in promise) Error: Error: Loading chunk 4 failed.
(missing: http://localhost:3000/fusioncharts.powercharts.js)
    at HTMLScriptElement.a (fusioncharts.js:103)
    at fusioncharts.js:2202

Do i need to install powercharts or treemaps separately for this.

PLease have a look

I checked with fusionchart team they are saying

Please note in order to render treemap chart you need to import fusioncharts.js, then fusioncharts.powercharts.js after that you need to include fusioncharts.treemap.js In order to render heatmap chart you need to import fusioncharts.js, then fusioncharts.powercharts.js

where i need to import not ale to understand

score 5 · Answer 1 · answered Apr 14 '19 at 16:19

In order to render the drag node chart, you need to import the following in the app.js

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts, FusionTheme);

In order to render the treemap chart, you need to import the following

import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import TreeMap from 'fusioncharts/fusioncharts.treemap';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts ,TreeMap,FusionTheme);

Do you know how to declare the same but for a Heat Map? – cluis92 Feb 09 '23 at 21:13 — cluis92, Feb 09 '23 at 21:13

score 0 · Accepted Answer · answered Apr 10 '19 at 05:44

0

As per fusioncharts doc for react.

https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react

End of the Render the chart section. You can see the specific imports for specific chart types.

I hope it will help you.

answered Apr 10 '19 at 05:44

Prabu samvel

1,213
8
19

I have added that but still chart is not loading – Srushti Shah Jun 30 '23 at 12:17

fusioncharts react error loading chunks failed

2 Answers2

Linked