Code // STEP 1 - Include Dependencies

// Include react import React from 'react'; // import ReactDOM from 'react-dom'; // Step 1 - Including react // import React from 'react'; // import ReactDOM from 'react-dom';

// Step 2 - Including the react-fusioncharts component import ReactFC from 'react-fusioncharts';

// Step 3 - Including the fusioncharts library import FusionCharts from 'fusioncharts';

// Step 4 - Including the map renderer import FusionMaps from 'fusioncharts/fusioncharts.maps';

// Step 5 - Including the map definition file import California from 'fusionmaps/maps/fusioncharts.california';

// Step 6 - Including the theme as fusion import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Step 7 - Adding the map and theme as dependency to the core fusioncharts ReactFC.fcRoot(FusionCharts, FusionMaps, California, FusionTheme);

//Step 8 - Defining map data const mapData = [{ "id": "001", "value": 2834 }, { "id": "003", "value": 3182 }, { "id": "005", "value": 3280 }, { "id": "007", "value": 911 }, { "id": "009", "value": 292 }, { "id": "011", "value": 530 }, { "id": "013", "value": 2515 }, { "id": "015", "value": 728 }, { "id": "017", "value": 1974 }, { "id": "019", "value": 848 }, { "id": "021", "value": 3278 }, { "id": "023", "value": 4463 }, { "id": "025", "value": 1198 }, { "id": "027", "value": 378 }, { "id": "029", "value": 2610 }, { "id": "031", "value": 1200 }, { "id": "033", "value": 3820 }, { "id": "035", "value": 940 }, { "id": "037", "value": 3416 }, { "id": "039", "value": 4004 }, { "id": "041", "value": 1604 }, { "id": "043", "value": 4011 }, { "id": "045", "value": 3203 }, { "id": "047", "value": 3775 }, { "id": "049", "value": 2721 }, { "id": "051", "value": 3417 }, { "id": "053", "value": 1530 }, { "id": "055", "value": 412 }, { "id": "057", "value": 3434 }, { "id": "059", "value": 1670 }, { "id": "061", "value": 1274 }, { "id": "063", "value": 4339 }, { "id": "065", "value": 2073 }, { "id": "067", "value": 1018 }, { "id": "069", "value": 3967 }, { "id": "071", "value": 3401 }, { "id": "073", "value": 3307 }, { "id": "075", "value": 1938 }, { "id": "077", "value": 489 }, { "id": "079", "value": 3207 }, { "id": "081", "value": 2295 }, { "id": "083", "value": 2747 }, { "id": "085", "value": 1114 }, { "id": "087", "value": 3400 }, { "id": "089", "value": 784 }, { "id": "091", "value": 1673 }, { "id": "093", "value": 4274 }, { "id": "095", "value": 4509 }, { "id": "097", "value": 3862 }, { "id": "099", "value": 1356 }, { "id": "101", "value": 4126 }, { "id": "103", "value": 1314 }, { "id": "105", "value": 1807 }, { "id": "107", "value": 4026 }, { "id": "109", "value": 3456 }, { "id": "111", "value": 1393 }, { "id": "113", "value": 1500 }, { "id": "115", "value": 2218 }]

const colorrange = { "minvalue": "0", "startlabel": "Low", "endlabel": "High", "code": "e44a00", "gradient": "1", "color": [{ "maxvalue": "2500", "code": "f8bd19" }, { "maxvalue": "5000", "code": "6baa01" }] };

// Step 9 - Creating the JSON object to store the map configurations const chartConfigs = { type: 'maps/northcarolina', width: '1000', height: '1000', dataFormat: 'json', dataSource: { "chart": { "animation": "0", "showbevel": "0", "usehovercolor": "1", "showlegend": "1", "legendposition": "BOTTOM", "legendborderalpha": "0", "legendbordercolor": "ffffff", "legendallowdrag": "0", "legendshadow": "0", "caption": "Website Visits for the month of March 2018", "connectorcolor": "000000", "fillalpha": "80", "hovercolor": "CCCCCC", "theme": "fusion" }, "colorrange": colorrange, "data": mapData } }; // Step 10 - Creating the DOM element to pass the react-fusioncharts component class Test extends React.Component { render() { return ( <ReactFC {...chartConfigs} /> ); } }

// export default App

export default Test;

I am trying to style the label for annotations of chart type world, the styling in tooltext is possible and I was able to customize it, however when I try to do same it randers all html as string. Surprisingly </br> tag does work on label. below is the sample what I want to achieve

I want to make the font of first line bigger and bold in the label.

I am developing react project created by create-react-app. I don't use webpack. just project created by create-react-app.

Now I want to build using "npm run build", but i can't because of the error following:

Failed to minify the code from this file:

    ./node_modules/fusioncharts/_internal/lib/lib.js:1:9788

I added a chart from Fusioncharts (this is chart: https://www.fusioncharts.com/charts/gauges/rating-meter-gauge) as a new dependency and trying to start the app it throws the following error and aborts: ReferenceError: window is not defined at Object. (/Users/phunghoang/Desktop/StockbookWebNew/node_modules/fusioncharts/fusioncharts.js:13:961) I followed these step: Install FusionCharts from npm $ npm install react-fusioncharts --save $ npm install fusioncharts --save My Project using Reactjs and Nextjs. Sorry My english not good?

On load, Sometimes it does not display the labels until user clicks on the pie chart or legends. Sometimes, Even though labels gets displayed, UI gets disturbed(labels and legends' text). This is mostly happening on chrome and not Firefox.

It will be helpful if anyone can suggest any change or solution.

Hi, I get console error sometimes. "Uncaught TypeError: a.setChartData is not a function", as I observed this happens when the 3 module is about to regenerate on importing modules

import React from 'react'; import ReactDOM from 'react-dom'; import ReactFC from 'react-fusioncharts';

// Here import licensed version of FusionCharts import FusionCharts from './path/to/fusioncharts'; import Charts from './path/to/fusioncharts/fusioncharts.charts';

// Provide FusionCharts core and other modules to resolve ReactFC.fcRoot(FusionCharts, Charts)

, so my is this, although my page still running and execute the charts correctly even this error console showed, but there are times that it cause to break my page.

I've created the following component, and when I import this component into another react component, it renders just fine, but the tooltips do not show and the event clicks on a bar or line do not work either. Is this a bug?

`import FusionCharts from 'fusioncharts'; import charts from 'fusioncharts/fusioncharts.charts'; import ReactFC from 'react-fusioncharts'; charts(FusionCharts);

export default class test extends React.Component { constructor(props) { super(props); }

render() {
	let myDataSource = {
		chart: {
			caption: "Harry's SuperMart",
			subCaption: "Top 5 stores in last month by revenue",
			numberPrefix: "$",
			theme: "ocean"
		},
		data: [{
			label: "Bakersfield Central",
			value: "880000"
		}, {
			label: "Garden Groove harbour",
			value: "730000"
		}, {
			label: "Los Angeles Topanga",
			value: "590000"
		}, {
			label: "Compton-Rancho Dom",
			value: "520000"
		}, {
			label: "Daly City Serramonte",
			value: "330000"
		}]
	};

let chartConfigs = {
    id: "revenue-chart2",
    renderAt: "revenue-chart-container2",
    type: "column2d",
    width: 500,
    height: 400,
    dataFormat: "json",
    dataSource: myDataSource,
    events: {
        dataplotclick: function (ev, props) {
            document.getElementById("value").innerHTML = props.displayValue;
        }
    }
};

	return (<ReactFC { ...chartConfigs } />);
}

}`

The world map label shows an unexpected rounded border. The html element which gets generated at runtime is as below -

<rect x="629.40625" y="257" width="62.828125" height="31.15625" ry="10" rx="10" fill="none" stroke="#666666" stroke-opacity="0.9" stroke-width="1" shape-rendering="crispEdges" stroke-dasharray="none" style="shape-rendering: crispedges; cursor: default;" opacity="1"></rect>

This is how it looks -

Need to implement MAP chart using fusion charts library but some how with npm package installer I can not able to download all map collection. rather I have to download those files from your official website and then need to paste in map folder.

I tried 4-5 times but maps are not downloaded along with npm package.

Do we have any other way to handle this issue?

Very new to react but I think it should be import ReactFC from 'react-fusioncharts' in the documentation instead of import react-fusioncharts from 'react-fusioncharts'. I might be using the modules wrong though.

Used with wepack

I'm using the ReactFC component to build cross platform dashboard application with React and CapacitorJS. When we are in mobile view, the scroll is not working if the initial touch is inside the chart area, which causes bad UX (the user needs to search an area which outside chart boundaries to be able to scroll down to the next charts). Is there any option to change this behavior ?

I'm using licensed 3.1.2 react-fusioncharts version

Hi , Is it possible to create chart which is combination of bar , line chart ? i tried <ReactFusioncharts type="mscombi2d" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> which shows column where as i need Bar .. is it possible to do it ?

Should probably point to:

• https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/online-sales-single-series-area-data-plot/data.json
• https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/online-sales-single-series-area-data-plot/schema.json

Hi, I faced some difficulties which I cannot solve, so I am here for help. I would like to use fusioncharts but in the built project the charts do now show up, and the console throws an error: Uncaught SyntaxError: Unexpected token ( .

I recreated the basics in a new example NextJS app and also had the same problem when I build it, you can check it out: https://github.com/Lunatial/FusionCharts

Another problem of mine is that (I could only try it in development mode) the fusionCharts tried to download google-fonts by CDN, and I do not know how to disable that effort.