Trouble creating a heatmap using FusionCharts in React

Question

I am trying to create a heatmap in my React application using FusionCharts but I'm running into some issues.

Here is my code:

import React from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const dataSource = {
    "chart": {
        "caption": "Sales of Liquor",
        "subCaption": "Top 5 stores in last month by state",
        "entityFillHoverColor": "#cccccc",
        "numberScaleValue": "1,1000,1000",
        "numberScaleUnit": "K,M,B",
        "numberPrefix": "$",
        "showLabels": "1",
        "theme": "fusion"
    },
    "colorrange": {
        "gradient": "1",
        "minvalue": "0",
        "code": "#e44a00",
        "startlabel": "Poor",
        "endlabel": "Good",
        "color": [{
            "maxvalue": "56580",
            "code": "#f8bd19"
        }, {
            "maxvalue": "100000",
            "code": "#6baa01"
        }]
    },
    "data": [{
        "id": "HI",
        "value": "3189"
    }, {
        "id": "DC",
        "value": "2879"
    }, {
        "id": "MD",
        "value": "920"
    }, {
        "id": "DE",
        "value": "4607"
    }, {
        "id": "RI",
        "value": "4890"
    }]
}

const HeatmapComponent = () => (
    <div>
        <ReactFC
            type="heatmap"
            width="100%"
            height="400"
            dataFormat="JSON"
            dataSource={dataSource}
        />
    </div>
);

export default HeatmapComponent;

I get the following error:

Uncaught (in promise) Error: ChunkLoadError: Loading chunk 4 failed.
(error: http://localhost:3000/main/fusioncharts.powercharts.js)
    at a.e (fusioncharts.js:13:2215)
    at h (fusioncharts.js:13:62601)
    at Function.<anonymous> (fusioncharts.js:13:63900)
    at i (fusioncharts.js:13:182570)
    at o (fusioncharts.js:13:182814)
    at d (fusioncharts.js:13:184030)
    at t2.chartType (fusioncharts.js:13:89022)
    at new e2 (fusioncharts.js:13:81081)
    at new f (fusioncharts.js:13:65848)
    at ReactFC2.renderChart (ReactFC.js:319:23)
    at fusioncharts.js:13:76816

I can't seem to figure out what's wrong. I have made sure to import all necessary FusionCharts components and libraries. Any ideas on what could be causing this and how to resolve it?

Here are the package versions I am using:

"react": "^18.2.0",
"fusioncharts": "^3.20.0",
"react-fusioncharts": "^4.0.0",

Thanks in advance!

I've tried using the boiler plate heatmap from the Fusion Charts website
Also tried using a simpler heatmap to implement
I've looked at this article and still no luck: fusioncharts react error loading chunks failed

score 0 · Answer 1 · answered Aug 11 '23 at 07:50

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

// Resolves charts dependancy
charts(FusionCharts);

const dataSource = {
  chart: {
    theme: "candy",
    caption: "Social Media Impact on Well-Being",
    showvalues: "0",
    subcaption: "Britain, 2017",
    showplotborder: "1",
    plotbordercolor: "#FFFFFF",
    plotborderthickness: "3",
    showshadow: "0",
    placexaxislabelsontop: "1",
    labelfontsize: "16",
    showtooltip: "0",
    usehovereffect: "0"
  },
  dataset: [
    {
      data: [
        {
          rowid: "Sleep",
          columnid: "Instagram",
          value: "-6"
        },
        {
          rowid: "Sleep",
          columnid: "Snapchat",
          value: "-7"
        },
        {
          rowid: "Sleep",
          columnid: "Facebook",
          value: "-8"
        },
        {
          rowid: "Sleep",
          columnid: "Twitter",
          value: "-5"
        },
        {
          rowid: "Fear of missing out",
          columnid: "Instagram",
          value: "-5"
        },
        {
          rowid: "Fear of missing out",
          columnid: "Snapchat",
          value: "-7"
        },
        {
          rowid: "Fear of missing out",
          columnid: "Facebook",
          value: "-4"
        },
        {
          rowid: "Fear of missing out",
          columnid: "Twitter",
          value: "-3"
        },
        {
          rowid: "Bullying",
          columnid: "Instagram",
          value: "-3"
        },
        {
          rowid: "Bullying",
          columnid: "Snapchat",
          value: "-4"
        },
        {
          rowid: "Bullying",
          columnid: "Facebook",
          value: "-5"
        },
        {
          rowid: "Bullying",
          columnid: "Twitter",
          value: "-4"
        },
        {
          rowid: "Body image",
          columnid: "Instagram",
          value: "-6"
        },
        {
          rowid: "Body image",
          columnid: "Snapchat",
          value: "-3"
        },
        {
          rowid: "Body image",
          columnid: "Facebook",
          value: "-4"
        },
        {
          rowid: "Body image",
          columnid: "Twitter",
          value: "-2"
        },
        {
          rowid: "Anxiety",
          columnid: "Instagram",
          value: "-3"
        },
        {
          rowid: "Anxiety",
          columnid: "Snapchat",
          value: "-2"
        },
        {
          rowid: "Anxiety",
          columnid: "Facebook",
          value: "-3"
        },
        {
          rowid: "Anxiety",
          columnid: "Twitter",
          value: "-2"
        },
        {
          rowid: "Depression",
          columnid: "Instagram",
          value: "3"
        },
        {
          rowid: "Depression",
          columnid: "Snapchat",
          value: "-2"
        },
        {
          rowid: "Depression",
          columnid: "Facebook",
          value: "-3"
        },
        {
          rowid: "Depression",
          columnid: "Twitter",
          value: "-2"
        },
        {
          rowid: "Loneliness",
          columnid: "Instagram",
          value: "-2"
        },
        {
          rowid: "Loneliness",
          columnid: "Snapchat",
          value: "-1"
        },
        {
          rowid: "Loneliness",
          columnid: "Facebook",
          value: "-2"
        },
        {
          rowid: "Loneliness",
          columnid: "Twitter",
          value: "-1"
        },
        {
          rowid: "Access to health advice",
          columnid: "Instagram",
          value: "1"
        },
        {
          rowid: "Access to health advice",
          columnid: "Snapchat",
          value: "-1"
        },
        {
          rowid: "Access to health advice",
          columnid: "Facebook",
          value: "3"
        },
        {
          rowid: "Access to health advice",
          columnid: "Twitter",
          value: "2"
        },
        {
          rowid: "Real-world relationships",
          columnid: "Instagram",
          value: "2"
        },
        {
          rowid: "Real-world relationships",
          columnid: "Snapchat",
          value: "4"
        },
        {
          rowid: "Real-world relationships",
          columnid: "Facebook",
          value: "3"
        },
        {
          rowid: "Real-world relationships",
          columnid: "Twitter",
          value: "1"
        },
        {
          rowid: "Awareness of people's health",
          columnid: "Instagram",
          value: "4"
        },
        {
          rowid: "Awareness of people's health",
          columnid: "Snapchat",
          value: "2"
        },
        {
          rowid: "Awareness of people's health",
          columnid: "Facebook",
          value: "5"
        },
        {
          rowid: "Awareness of people's health",
          columnid: "Twitter",
          value: "4"
        },
        {
          rowid: "Community building",
          columnid: "Instagram",
          value: "4"
        },
        {
          rowid: "Community building",
          columnid: "Snapchat",
          value: "2"
        },
        {
          rowid: "Community building",
          columnid: "Facebook",
          value: "5"
        },
        {
          rowid: "Community building",
          columnid: "Twitter",
          value: "4"
        },
        {
          rowid: "Emotional support",
          columnid: "Instagram",
          value: "4"
        },
        {
          rowid: "Emotional support",
          columnid: "Snapchat",
          value: "4"
        },
        {
          rowid: "Emotional support",
          columnid: "Facebook",
          value: "6"
        },
        {
          rowid: "Emotional support",
          columnid: "Twitter",
          value: "4"
        },
        {
          rowid: "Self-identity",
          columnid: "Instagram",
          value: "5"
        },
        {
          rowid: "Self-identity",
          columnid: "Snapchat",
          value: "4"
        },
        {
          rowid: "Self-identity",
          columnid: "Facebook",
          value: "2"
        },
        {
          rowid: "Self-identity",
          columnid: "Twitter",
          value: "4"
        },
        {
          rowid: "Self-expression",
          columnid: "Instagram",
          value: "7"
        },
        {
          rowid: "Self-expression",
          columnid: "Snapchat",
          value: "5"
        },
        {
          rowid: "Self-expression",
          columnid: "Facebook",
          value: "6"
        },
        {
          rowid: "Self-expression",
          columnid: "Twitter",
          value: "8"
        }
      ]
    }
  ],
  colorrange: {
    gradient: "1",
    minvalue: "-8",
    code: "#862d2d",
    startlabel: "Negative",
    endlabel: "Positive",
    color: [
      {
        code: "#ff9933",
        maxvalue: "-4"
      },
      {
        code: "#FFFFFF",
        maxvalue: "0"
      },
      {
        code: "#9ae5e5",
        maxvalue: "4"
      },
      {
        code: "#004d4d",
        maxvalue: "8"
      }
    ]
  }
};

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

As per fusion chart doc for react - https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react

Trouble creating a heatmap using FusionCharts in React

1 Answers1