Recommended Posts

Hello I'm having issues when trying to draw a cylinder in react. I have my cylinder as a component and the I import in one of my views.

 

mport React from "react";
import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
 
// Resolves charts dependancy
charts(FusionCharts);
 
// Resolves charts dependancy
//charts(FusionCharts);
 
const dataSource = {
  chart: {
    caption: "LPG Level Indicator",
    lowerlimit: "0",
    upperlimit: "25",
    lowerlimitdisplay: "Empty",
    upperlimitdisplay: "Full",
    numbersuffix: " ltrs",
    cylfillcolor: "#5D62B5",
    plottooltext: "LPG Consumption: <b>20 ltrs</b>",
    cylfillhoveralpha: "85",
    theme: "fusion"
  },
  value: "20"
};
 
class Cylinder extends React.Component {
  render() {
    return (
      <ReactFusioncharts
        type="cylinder"
        width="100%"
        height="100%"
        dataFormat="JSON"
        dataSource={dataSource}
      />
    );
  }
 
}
 
export default Cylinder;
 
 
Then I call it like this in my view:
 
 
import React from "react";
import Cylinder from "../components/cylinder.js";
 
  // core components
 
class Monitoring extends React.Component {
    render() {
      return (
              <Cylinder value = "20"/>
          )
  }
}
 
Below the result:
 
image.thumb.png.add55ca31ee10e93a269f209f505979e.png
 

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