maciejosas

Chart type not supported after deploy to azure- react app

Recommended Posts

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;

 

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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: image.thumb.png.b296353bc7cbf51b7f057020eb1c1603.png

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now