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
// Resolves charts dependancy
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 (
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:

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