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:
