1

I am working on a web application developed using next.js and FusionCharts. Currently, many other FusionChart types are already configured in the App. I need to implement the Overlapping Bars chart as in the below document.

https://www.fusioncharts.com/charts/column-bar-charts/overlapping-bars-chart?framework=react

But I faced an error as below:

Error: ChunkLoadError: Loading chunk 11 failed.
(error: http://localhost:3000/dashboard/6687/fusioncharts.overlappedbar2d.js)
    at Function.a.e (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:2029)
    at d (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:56980)
    at Function.eval (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:57704)
    at i (webpack-internal:///./node_modules/fusioncharts/fusioncharts.js:13:172154)

Below is the code (Only necessary code is added):

import React, { PureComponent } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import World from 'fusioncharts/maps/fusioncharts.world';
import Maps from 'fusioncharts/fusioncharts.maps';
import Usa from 'fusioncharts/maps/fusioncharts.usa';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import Zoomline from 'fusioncharts/fusioncharts.zoomline';
import Zoomscatter from 'fusioncharts/fusioncharts.zoomscatter';
import Vml from 'fusioncharts/fusioncharts.vml';
import gantt from 'fusioncharts/fusioncharts.gantt';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import derieveBaseUrl from '../../helpers/generateEndpoint';


ReactFC.fcRoot(FusionCharts, Maps, World, Usa, Charts, gantt, Widgets, Vml, FusionTheme, Zoomline, Zoomscatter, Column2D);

render() {
    return (
      <ReactFusioncharts
        type="overlappedbar2d"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }

I am using FusioChart V. 3.15.3. There are so many other similar questions but it didn't help me solve this problem. So I decided to put a question here.

NiroshanJ
  • 558
  • 1
  • 5
  • 20

1 Answers1

2

I was able to solve the problem. What I did is:

Import the overlapping chart:

import Overlappedbar2d from 'fusioncharts/fusioncharts.overlappedbar2d';

and use it in ReactFC:

ReactFC.fcRoot(FusionCharts, Maps, World, Usa, Charts, gantt, Widgets, Vml, FusionTheme, Zoomline, Zoomscatter, Column2D, Overlappedbar2d);

The final code should be updated like this.

import React, { PureComponent } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import World from 'fusioncharts/maps/fusioncharts.world';
import Maps from 'fusioncharts/fusioncharts.maps';
import Usa from 'fusioncharts/maps/fusioncharts.usa';
import Widgets from 'fusioncharts/fusioncharts.widgets';
import Zoomline from 'fusioncharts/fusioncharts.zoomline';
import Zoomscatter from 'fusioncharts/fusioncharts.zoomscatter';
import Vml from 'fusioncharts/fusioncharts.vml';
import gantt from 'fusioncharts/fusioncharts.gantt';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import derieveBaseUrl from '../../helpers/generateEndpoint';
import Overlappedbar2d from 'fusioncharts/fusioncharts.overlappedbar2d';


ReactFC.fcRoot(FusionCharts, Maps, World, Usa, Charts, gantt, Widgets, Vml, FusionTheme, Zoomline, Zoomscatter, Column2D, Overlappedbar2d);

render() {
    return (
      <ReactFusioncharts
        type="overlappedbar2d"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }

For more information, please refer below: fusioncharts react error loading chunks failed

NiroshanJ
  • 558
  • 1
  • 5
  • 20