Table of Contents
import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
// Resolves charts dependancy
charts(FusionCharts);
const dataSource = {
chart: {
caption: "Market Share of Web Servers",
plottooltext: "<b>$percentValue</b> of web servers run on $label servers",
showlegend: "1",
showpercentvalues: "1",
legendposition: "bottom",
usedataplotcolorforlabels: "1",
theme: "fusion"
},
data: [
{
label: "Apache",
value: "32647479"
},
{
label: "Microsoft",
value: "22100932"
},
{
label: "Zeus",
value: "14376"
},
{
label: "Other",
value: "18674221"
}
]
};
class MyComponent extends React.Component {
render() {
return (
<ReactFusioncharts
type="pie2d"
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…