Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


			<div id="react-chart">Just a moment!</div>		</center>
<script type="text/jsx">
			FusionCharts.ready(function () {
    var weatherData = {
      "chart": {
        // caption options
        "caption": "Weather in Chicago",
        "captionFontBold": "0",
        "captionFontSize": "23",
        "captionPadding": "20",
        // sub-caption options
        "subcaption": "Variation of mean temperature in last year",
        "subCaptionFontSize": "17",
        "subCaptionFontBold": "0",
        // other chart options
        "pYAxisName": "Celsius",
        "sYAxisName": "Farhenheit",
        "pYAxisNameFontBold": "0",
        "sYAxisNameFontBold": "0",
        "pYAxisNameFontSize": "15.5",
        "sYAxisNameFontSize": "15.5",
        "compactDataMode": "1",
        "pixelsPerPoint": "0",
        "numberSuffix": "°C",
        "snumberSuffix": "°F",
        "dataSeparator": "|",
        "lineThickness": "1.73",
        "canvasBgColor": "#ff9b99,#ffda99,#fffec9,#c4f1f7,#9ec0d9",
        "canvasBgRatio": "10",
        "canvasBgAngle": "90",
        "canvasBgAlpha": "100",
        "numdivlines": "5",
        "pYAxisMaxValue": "40",
        "pYAxisMinValue": "-20",
        "sYAxisMaxValue": "104",
        "sYAxisMinValue": "-4",
        "baseFontSize": "13",
        "outCnvBaseFontSize": "13",
        "divLineThickness": "0.25",
        "divLineColor": "#808184",
        "divLineAlpha": "90",
        "divLineDashed": "0",
        "scrollHeight": "9",
        "scrollColor": "#D0D2D3",
        "theme": "zune"
      "categories": [{
        "fontColor": "#ff0000",
        "category": "Jan 01|Jan 02|Jan 03|Jan 04|Jan 05|Jan 06|Jan 07|Jan 08|Jan 09|Jan 10|Jan 11|Jan 12|Jan 13|Jan 14|Jan 15|Jan 16|Jan 17|Jan 18|Jan 19|Jan 20|Jan 21|Jan 22|Jan 23|Jan 24|Jan 25|Jan 26|Jan 27|Jan 28|Jan 29|Jan 30|Jan 31|Feb 01|Feb 02|Feb 03|Feb 04|Feb 05|Feb 06|Feb 07|Feb 08|Feb 09|Feb 10|Feb 11|Feb 12|Feb 13|Feb 14|Feb 15|Feb 16|Feb 17|Feb 18|Feb 19|Feb 20|Feb 21|Feb 22|Feb 23|Feb 24|Feb 25|Feb 26|Feb 27|Feb 28|Mar 01|Mar 02|Mar 03|Mar 04|Mar 05|Mar 06|Mar 07|Mar 08|Mar 09|Mar 10|Mar 11|Mar 12|Mar 13|Mar 14|Mar 15|Mar 16|Mar 17|Mar 18|Mar 19|Mar 20|Mar 21|Mar 22|Mar 23|Mar 24|Mar 25|Mar 26|Mar 27|Mar 28|Mar 29|Mar 30|Mar 31|Apr 01|Apr 02|Apr 03|Apr 04|Apr 05|Apr 06|Apr 07|Apr 08|Apr 09|Apr 10|Apr 11|Apr 12|Apr 13|Apr 14|Apr 15|Apr 16|Apr 17|Apr 18|Apr 19|Apr 20|Apr 21|Apr 22|Apr 23|Apr 24|Apr 25|Apr 26|Apr 27|Apr 28|Apr 29|Apr 30|May 01|May 02|May 03|May 04|May 05|May 06|May 07|May 08|May 09|May 10|May 11|May 12|May 13|May 14|May 15|May 16|May 17|May 18|May 19|May 20|May 21|May 22|May 23|May 24|May 25|May 26|May 27|May 28|May 29|May 30|May 31|Jun 01|Jun 02|Jun 03|Jun 04|Jun 05|Jun 06|Jun 07|Jun 08|Jun 09|Jun 10|Jun 11|Jun 12|Jun 13|Jun 14|Jun 15|Jun 16|Jun 17|Jun 18|Jun 19|Jun 20|Jun 21|Jun 22|Jun 23|Jun 24|Jun 25|Jun 26|Jun 27|Jun 28|Jun 29|Jun 30|Jul 01|Jul 02|Jul 03|Jul 04|Jul 05|Jul 06|Jul 07|Jul 08|Jul 09|Jul 10|Jul 11|Jul 12|Jul 13|Jul 14|Jul 15|Jul 16|Jul 17|Jul 18|Jul 19|Jul 20|Jul 21|Jul 22|Jul 23|Jul 24|Jul 25|Jul 26|Jul 27|Jul 28|Jul 29|Jul 30|Jul 31|Aug 01|Aug 02|Aug 03|Aug 04|Aug 05|Aug 06|Aug 07|Aug 08|Aug 09|Aug 10|Aug 11|Aug 12|Aug 13|Aug 14|Aug 15|Aug 16|Aug 17|Aug 18|Aug 19|Aug 20|Aug 21|Aug 22|Aug 23|Aug 24|Aug 25|Aug 26|Aug 27|Aug 28|Aug 29|Aug 30|Aug 31|Sep 01|Sep 02|Sep 03|Sep 04|Sep 05|Sep 06|Sep 07|Sep 08|Sep 09|Sep 10|Sep 11|Sep 12|Sep 13|Sep 14|Sep 15|Sep 16|Sep 17|Sep 18|Sep 19|Sep 20|Sep 21|Sep 22|Sep 23|Sep 24|Sep 25|Sep 26|Sep 27|Sep 28|Sep 29|Sep 30|Oct 01|Oct 02|Oct 03|Oct 04|Oct 05|Oct 06|Oct 07|Oct 08|Oct 09|Oct 10|Oct 11|Oct 12|Oct 13|Oct 14|Oct 15|Oct 16|Oct 17|Oct 18|Oct 19|Oct 20|Oct 21|Oct 22|Oct 23|Oct 24|Oct 25|Oct 26|Oct 27|Oct 28|Oct 29|Oct 30|Oct 31|Nov 01|Nov 02|Nov 03|Nov 04|Nov 05|Nov 06|Nov 07|Nov 08|Nov 09|Nov 10|Nov 11|Nov 12|Nov 13|Nov 14|Nov 15|Nov 16|Nov 17|Nov 18|Nov 19|Nov 20|Nov 21|Nov 22|Nov 23|Nov 24|Nov 25|Nov 26|Nov 27|Nov 28|Nov 29|Nov 30|Dec 01|Dec 02|Dec 03|Dec 04|Dec 05|Dec 06|Dec 07|Dec 08|Dec 09|Dec 10|Dec 11|Dec 12|Dec 13|Dec 14|Dec 15|Dec 16|Dec 17|Dec 18|Dec 19|Dec 20|Dec 21|Dec 22|Dec 23|Dec 24|Dec 25|Dec 26|Dec 27|Dec 28|Dec 29|Dec 30|Dec 31"
      "dataset": [{
        "color": "666666",
        "data": "-4|-2|1|-6|-15|-13|-17|-14|-12|-11|-1|-4|-8|-11|-3|-2|3|3|2|3|1|0|0|4|0|-4|-2|-1|2|-2|-1|-3|-9|-7|-6|-12|-4|2|3|-2|-2|-1|-9|-8|-8|-13|-10|-8|-14|-17|-12|-3|-7|-13|-7|-6|-9|-13|-11|-5|-4|0|-4|-10|-8|2|3|4|8|7|8|12|11|9|15|3|4|8|8|6|1|-1|1|5|4|-1|-2|4|11|9|14|15|7|8|14|12|7|9|16|12|11|15|16|14|13|13|18|15|16|10|10|6|7|9|7|9|10|9|12|8|12|19|22|19|13|19|22|24|14|12|16|12|9|14|21|24|23|25|19|15|9|8|15|15|20|21|24|23|22|22|26|15|11|13|14|19|22|18|18|22|24|23|28|22|19|23|26|25|19|18|22|17|21|26|26|23|23|23|19|20|21|22|22|17|18|21|23|24|27|19|18|20|23|23|24|26|23|21|22|29|29|27|26|24|24|25|26|28|25|27|29|28|27|27|26|28|25|26|25|26|24|22|25|27|27|28|27|25|22|21|22|24|22|19|20|17|19|21|22|22|24|28|28|29|27|27|29|29|26|21|20|17|16|16|21|24|23|25|23|18|17|18|21|22|21|21|21|22|23|19|15|14|14|11|13|15|17|18|19|14|13|19|19|14|13|16|9|7|9|16|19|20|16|16|16|12|11|12|9|6|8,|10|13|17|17|17|19|13|8|7|8|9|12|11|6|7|13|12|13|14|7|3|-2|-6|1|4|2|8|13|9|3|3|6|6|2|1|5|3|4|3|7|9|11|10|13|15|12|7|7|1|-1|-4|4|9|5|11|4|5|6|4|3|2|-1|-3|-2"
      }, {
        "parentYAxis": "S",

		var weatherChartConfigs = {
  renderAt: "react-chart",
  type: "zoomlinedy",
  width: "100%",
  height: "500",
  dataFormat: "json",
  dataSource: weatherData

    React.render( < react_fc.FusionCharts {...weatherChartConfigs}/>, document.getElementById('react-chart'));