I have read all of the postings on chart type not supported but have not been able to solve my problem. Also.. all of the JSFiddle examples you posted dont work.
Here is my file
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './App.js';
import logos from './google_logo.png' // relative path to image
import Grid from './Grid_Icon.png' // relative path to image
import ReactDOM from 'react-dom';
import fusioncharts from 'fusioncharts';
// Load the charts module
import charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
var attrs = {
"caption": "Sales Comparison: 2013 versus 2014",
"subCaption": "Harry's SuperMart",
"numberprefix": "$",
"plotgradientcolor": "",
"bgcolor": "FFFFFF",
"showalternatehgridcolor": "0",
"divlinecolor": "CCCCCC",
"showvalues": "0",
"showcanvasborder": "0",
"canvasborderalpha": "0",
"canvasbordercolor": "CCCCCC",
"canvasborderthickness": "1",
"yaxismaxvalue": "30000",
"captionpadding": "30",
"linethickness": "3",
"yaxisvaluespadding": "15",
"legendshadow": "0",
"legendborderalpha": "0",
"palettecolors": "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78",
"showborder": "0"
};
var categories = [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}];
var dataset = [{
"seriesname": "2013",
"data": [{
"value": "22400"
}, {
"value": "24800"
}, {
"value": "21800"
}, {
"value": "21800"
}, {
"value": "24600"
}, {
"value": "27600"
}, {
"value": "26800"
}, {
"value": "27700"
}, {
"value": "23700"
}, {
"value": "25900"
}, {
"value": "26800"
}, {
"value": "24800"
}]
},
{
"seriesname": "2012",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17600"
}, {
"value": "18800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}
];
class App extends Component {
render() {
return (
<div>
<div id="box">
<div id="logo">
<img src={logos} alt={"logo"}/>
</div>
<div></div>
<div id="Rider-Text" class="flexcontainer">
Passengers to Date
</div>
<div class="clock"></div>
ReactDOM.render(
<ReactFC
width="600"
height="400"
type="msline"
chart="attrs"
categories="categories"
dataset="dataset" />,
document.getElementById('chart-container')
);
<div id="Rider-Text" class="flexcontainer">
Launched |
</div>
<div id="Rider-Text-Small" class="flexcontainer">
2/3/2015
</div>
<div id="chart-container">FusionCharts XT will load here!</div>
</div>
<div id="grid" class="flexcontainer">
<a href="#"><img src={Grid} alt={"logo"}/></a>
</div>
</div>
);
}
}
export default App;
