Table of Contents
import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts"; import ReactFusioncharts from "react-fusioncharts";2. Next, you have to resolve the chart dependency.
charts(FusionCharts);3. Then you have to add the data source.
const dataSource = { chart: { caption: "Lead sources by industry", yaxisname: "Number of Leads", aligncaptionwithcanvas: "0", plottooltext: "<b>$dataValue</b> leads received", theme: "fusion" }, data: [ { label: "Travel & Leisure", value: "41" }, { label: "Advertising/Marketing/PR", value: "39" }, { label: "Other", value: "38" }, { label: "Real Estate", value: "32" }, { label: "Communications/Cable/Phone", value: "26" }, { label: "Construction", value: "25" }, { label: "Entertainment", value: "25" }, { label: "Staffing Firm/Full Time/Temporary", value: "24" }, { label: "Transportation/Logistics", value: "23" }, { label: "Utilities", value: "22" }, { label: "Aerospace/Defense Products", value: "18" }, { label: "Banking/Finance/Securities", value: "16" }, { label: "Consumer Products - Non-Durables", value: "15” }, { label: "Distribution", value: "13" }, { label: "Education", value: "12" }, { label: "Health Products & Services", value: "11" }, { label: "Hospitality & Hotels", value: "10" }, { label: "Non-Business/Residential", value: "6" }, { label: "Pharmaceutical", value: "4" }, { label: "Printing & Publishing", value: "1" }, { label: "Professional Services", value: "1" }, { label: "VAR/ISV", value: "1" }, { label: "Warranty Administrators", value: "1" } ] };4. Now, you can render the graph.
class MyComponent extends React.Component { render() { return ( <ReactFusioncharts type="bar2d" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> ); } }
import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts"; import ReactFusioncharts from "react-fusioncharts";2. Then you need to resolve charts dependency.
charts(FusionCharts);3. Next, you have to include the data.
const dataSource = { chart: { caption: "Support Tickets : Received vs Resolved", yaxisname: "# of Tickets", subcaption: "Last week", numdivlines: "3", showvalues: "0", legenditemfontsize: "15", legenditemfontbold: "1", plottooltext: "<b>$dataValue</b> Tickets $seriesName on $label", theme: "fusion" }, categories: [ { category: [ { label: "Jan 1" }, { label: "Jan 2" }, { label: "Jan 3" }, { label: "Jan 4" }, { label: "Jan 5" }, { label: "Jan 6" }, { label: "Jan 7" } ] } ], dataset: [ { seriesname: "Received", data: [ { value: "55" }, { value: "45" }, { value: "52" }, { value: "29" }, { value: "48" }, { value: "28" }, { value: "32" } ] }, { seriesname: "Resolved", data: [ { value: "50" }, { value: "30" }, { value: "49" }, { value: "22" }, { value: "43" }, { value: "14" }, { value: "31" } ] } ] };4. Finally, you have to render the graph.
class MyComponent extends React.Component { render() { return ( <ReactFusioncharts type="msspline" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> ); } }
Imagine you’re comparing the sales performance of your top product lines across different regions, or…
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…