Sultan

How to set up with React

Recommended Posts

Hello,
I have bought a license for FusionChart
I received a zip file fusioncharts-suite-r-xt-one-developer-perpetual.zip
but when I went the site the instructions simply said:
1-create react app
2- download the dependencies "npm install fusioncharts react-fusioncharts --save"
3- then I do what is done in the last step called "Render the chart"

https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react?utm_source=downloadPackage&utm_medium=referral&utm_campaign=paidLicense

 everything works fine
but now I want to use other type of charts
like the nested pie chart
https://www.fusioncharts.com/charts/pie-doughnut-charts/nested-pie-chart-in-2d?framework=react

how do I use it ?

Share this post


Link to post
Share on other sites

Hi Sultan,

 

FusionCharts Suite is categorized into multiple packages.

Multi-level Pie chart comes under the PowerChartsXT package, so to render the charts from PowerCharts package you need to use the below import statements :

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';
import ReactFC from 'react-fusioncharts';

ReactFC.fcRoot(FusionCharts, PowerCharts);

Then you can set the chart type as "multilevelpie" and set the dataSource prescribed for the chart type to see the chart rendered.

Let us know if you face any problem.

Reference link : https://github.com/fusioncharts/react-fusioncharts-component#quick-start

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

I am doing the following:

// Include the react-fusioncharts component
import ReactFC from "react-fusioncharts";
 
// Include the fusioncharts library
import FusionCharts from "fusioncharts";
 
// Include the chart type
import PowerCharts from 'fusioncharts/fusioncharts.powercharts';

 
// Resolves charts dependancy
PowerCharts(FusionCharts);
 
class VASDashboard extends Component {
constructor() {
        super();
        this.state = {
         
dataSource: {
                chart: {
                    caption: "Sales by Product Category",
                    subcaption: "Last Quarter",
                    showplotborder: "1",
                    plotfillalpha: "60",
                    hoverfillcolor: "#CCCCCC",
                    numberprefix: "$",
                    plottooltext:
                        "Sales of <b>$label</b> was <b>$$valueK</b>, which was $percentValue of parent category",
                    theme: "fusion"
                },
                category: [
                    {
                        label: "Products",
                        tooltext: "Please hover over a sub-category to see details",
                        color: "#ffffff",
                        value: "150",
                        category: [
                            {
                                label: "Food & Beverage",
                                color: "#f8bd19",
                                value: "55.5",
                                category: [
                                    {
                                        label: "Breads",
                                        color: "#f8bd19",
                                        value: "11.1"
                                    },
                                    {
                                        label: "Juice",
                                        color: "#f8bd19",
                                        value: "27.75"
                                    },
                                    {
                                        label: "Noodles",
                                        color: "#f8bd19",
                                        value: "9.99"
                                    },
                                    {
                                        label: "Seafood",
                                        color: "#f8bd19",
                                        value: "6.66"
                                    }
                                ]
                            },
                            {
                                label: "Apparel",
                                color: "#33ccff",
                                value: "42",
                                category: [
                                    {
                                        label: "Sun Glasses",
                                        color: "#33ccff",
                                        value: "10.08"
                                    },
                                    {
                                        label: "Clothing",
                                        color: "#33ccff",
                                        value: "18.9"
                                    },
                                    {
                                        label: "Handbags",
                                        color: "#33ccff",
                                        value: "6.3"
                                    },
                                    {
                                        label: "Shoes",
                                        color: "#33ccff",
                                        value: "6.72"
                                    }
                                ]
                            },
                            {
                                label: "Baby Products",
                                color: "#ffcccc",
                                value: "22.5",
                                category: [
                                    {
                                        label: "Bath &{br}Grooming",
                                        color: "#ffcccc",
                                        value: "9.45"
                                    },
                                    {
                                        label: "Food",
                                        color: "#ffcccc",
                                        value: "6.3"
                                    },
                                    {
                                        label: "Diapers",
                                        color: "#ffcccc",
                                        value: "6.75"
                                    }
                                ]
                            },
                            {
                                label: "Electronics",
                                color: "#ccff66",
                                value: "30",
                                category: [
                                    {
                                        label: "Laptops",
                                        color: "#ccff66",
                                        value: "8.1"
                                    },
                                    {
                                        label: "Televisions",
                                        color: "#ccff66",
                                        value: "10.5"
                                    },
                                    {
                                        label: "SmartPhones",
                                        color: "#ccff66",
                                        value: "11.4"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
      }
}
 
render() {
     
     return (
            
                   <ReactFC
                        type="multilevelpie"
                        width="100%"
                        height="100%"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource}
                    />

     )

}


}


I attached the result of this nested pie chart

I want step by step instructions for the React nested 2 pie chart
Please don't give me circular explanations that don't help me

FusionCharts.png

Share this post


Link to post
Share on other sites

Hi Sultan,

 

You are not using the imports to provide the dependency correctly. Please check the same in the below sample of a multilevelpie chart :

https://codesandbox.io/s/multi-level-pie-event-react-ighxc

The zip that you have received after purchasing the license is the licensed version of the FusionCharts library.

Regarding how to use your licensed version in React application you would get a response to your support query raised.

 

Thanks

Akash.

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