Cylinder Chart demo in React

[Luis Salazar]

Hello, I need to implement  a Cylinder Gauge using reactjs, but I can't implement it correctly, you'll have an example that can help me ?

Best Regards

[Ayan Bhadury]

Hi,

Here is a demo in react - https://codesandbox.io/s/xenodochial-mestorf-5r3zu?file=/src/App.js

Thanks,

Ayan

[LMUJICAF]

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:

 

 

[LMUJICAF]

Hello,

I resolved it importing import charts from "fusioncharts/fusioncharts.widgets"; instead of import charts from "fusioncharts/fusioncharts.charts";