Sultan Report post Posted June 25, 2020 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 charthttps://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
Akash Biswas Report post Posted June 25, 2020 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
Sultan Report post Posted June 26, 2020 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 Share this post Link to post Share on other sites
Sultan Report post Posted June 26, 2020 Also am not understanding. What to do with the zip file that I was given after I bought the "FusionCharts Suite XT" package ? Share this post Link to post Share on other sites
Akash Biswas Report post Posted June 26, 2020 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
