Start a new topic

Gauges from Ionic React got an issue

Hey!!


I need to create a angular gauge from ionic react app. I tried with column chart example & this was okay but when I create a gauge chart I got an error. 


I hope you can help!!


Code:

 

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);
Charts(FusionCharts);

const dataSource = {
    chart: {
      caption: "Pressure",
      captionontop: "0",
      origw: "380",
      origh: "250",
      gaugestartangle: "135",
      gaugeendangle: "45",
      gaugeoriginx: "190",
      gaugeoriginy: "220",
      gaugeouterradius: "190",
      theme: "fusion",
      showvalue: "1",
      numbersuffix: " MPa",
      valuefontsize: "25"
    },
    colorrange: {
      color: [
        {
          minvalue: "0",
          maxvalue: "0.2",
          code: "#62B58F"
        },
        {
          minvalue: "0.2",
          maxvalue: "0.4",
          code: "#FFC533"
        },
        {
          minvalue: "0.4",
          maxvalue: "0.6",
          code: "#F2726F"
        }
      ]
    },
    dials: {
      dial: [
        {
          value: "0.3",
          tooltext: "Moderate Pressure"
        }
      ]
    }
  };

const Metrics: React.FC = () => {
       return(
             <ReactFC
                type="angulargauge"
                width="100%"
                height="100%"
                dataFormat="json"
                dataSource={dataSource} />
       );
}

 

Error: 


image


Login or Signup to post a comment