Chart type not supported after deploy to azure- react app

[maciejosas]

Hi all,

I have a problem with a spline type chart in my react app. Locally everything works perfectly, but after I deployed application to Azure charts in deployed app stopped work. The message is: "Chart type not supported". I've tried to find solution on the internet since yesterday, but it still doesn't work. Do anyone know what may solve that issue? This is my code:

import React from "react";
import ReactDOM from "react-dom";
import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import * as powercharts from "fusioncharts/fusioncharts.powercharts";
import Spline from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.candy";

ReactFC.fcRoot(FusionCharts, powercharts, Spline, FusionTheme);

const Chart = props => {
  const chartConfigs = {
    type: "spline",
    width: "96%",
    height: "100%",
    dataFormat: "JSON",

    dataSource: {
      chart: {
        bgColor: "#292129",
        baseFontSize: "16",
        yaxisnamefontsize: "16",
        valuefontsize: "14",
        basefont: "Segoe UI",
        labelfont: "Segoe UI",
        outCanvasBaseFont: "Segoe UI",
        baseChartMessageFont: "Segoe UI",
        captionFont: "Segoe UI",
        yaxisnamefont: "Segoe UI",
        valuefont: "Segoe UI",
        rendererrormessagefont: "Segoe UI",
        outcnvbasefont: "Segoe UI",
        caption: props.title,
        yaxisname: props.unit
          ? `${props.yaxisname} [${props.unit}]`
          : props.yaxisname,
        anchorradius: "5",
        plottooltext: `${props.plottooltext}`,
        showhovereffect: "1",
        showvalues: "0",
        numbersuffix: "",
        theme: "candy",
        anchorbgcolor: "#F70CF7", //#72D7B2
        palettecolors: "#F70CF7"
      },
      data: props.data
    }
  };

  return (
    <div className="chart-box">
      <ReactFC {...chartConfigs} />
    </div>
  );
};

export default Chart;

 

[Ayan Bhadury]

Hi,

Please import the FusionCharts files in the following way in order to resolve the problem.

import FusionCharts from 'fusioncharts';

import PowerCharts from 'fusioncharts/fusioncharts.powercharts';

import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

import ReactFC from 'react-fusioncharts';

PowerCharts(FusionCharts);

FusionTheme(FusionCharts);

ReactFC.fcRoot(FusionCharts);

[maciejosas]

I did so, but unfortunatelly chart still doesn't work

[Ayan Bhadury]

Please share the updated import statements.

[maciejosas]

There is my updated code:

import React from "react";
import ReactDOM from "react-dom";
import FusionCharts from "fusioncharts";
import PowerCharts from "fusioncharts/fusioncharts.powercharts";
import Spline from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import ReactFC from "react-fusioncharts";

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

I have also spotted an error in the browser's console:

[Ayan Bhadury]

Hi,

You have not passed the parameters inside the fc root as suggested, please use only FusionCharts as the dependency

import FusionCharts from 'fusioncharts';

import PowerCharts from 'fusioncharts/fusioncharts.powercharts';

import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

import ReactFC from 'react-fusioncharts';

PowerCharts(FusionCharts);

FusionTheme(FusionCharts);

ReactFC.fcRoot(FusionCharts);

[maciejosas]

Hi,

When I pass only FusionCharts into ReactFC.fcRoot() the chart doesn't work as well.

 

[Ayan Bhadury]

Please raise a ticket at [email protected], you can share the forum link for reference.