Top 10 iOS apps - React JS

Creating charts using FusionCharts and React JS

HTML

<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://unpkg.com/react-fusioncharts/dist/react-fusioncharts.js"></script>
<style>
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: local('Roboto Web SemiBold'), local('RobotoWeb-SemiBold'), url(https://fonts.gstatic.com/s/titilliumweb/v5/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  }
</style>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="top"></div>

JavaScript 1.7

FusionCharts.ready(function() {
  var myDataSource = {
    chart: {
      caption: "Top 10 iOS Apps - July 2017",
      subCaption: "Downloads (In Millions)",
      "canvasBgAlpha": "0",
      "bgColor": "#ffffff",
      "bgAlpha": "70",
      "baseFont": "Roboto",
      "baseFontSize": "14",
      "showAlternateVGridColor": "1",
      "alternateVGridAlpha": "5",
      "labelFontSize": "15",
      "captionFontSize": "20",
      "subCaptionFontSize": "16",
      "toolTipColor": "#000000",
      "toolTipBgColor": "#ffffff",
      "toolTipAlpha": "90",
      "captionFontBold": "0",
      "subCaptionFontBold": "0",
      "paletteColors": "#8E24AA",
      "valueFontSize": "13",
      "valueFontBold": "0",
      "animation": "0",
      "divLineAlpha": "15",
      "divLineDashed": "0",
      "plotFillAlpha": "90",
      theme: "ocean"
    },
    "data": [{
      "label": "Sarahah",
      "value": "3880000"
    }, {
      "label": "Messenger",
      "value": "2570000"
    }, {
      "label": "Snake vs Block",
      "value": "2420000"
    }, {
      "label": "Facebook",
      "value": "2140000"
    }, {
      "label": "Amazon",
      "value": "1830000"
    }, {
      "label": "Spotify Music",
      "value": "1540000"
    }, {
      "label": "Netflix",
      "value": "1530000"
    }, {
      "label": "Word Connect",
      "value": "1440000"
    }, {
      "label": "Pandora",
      "value": "1300000"
    }, {
      "label": "WhatsApp Messenger",
      "value": "1210000"
    }]
  };

  var barChartConfigs = {
    id: "bar-chart",
    renderAt: "chart-container",
    type: "bar2d",
    width: "100%",
    height: 400,
    dataFormat: "json",
    dataSource: myDataSource
  };
  
  var MyApp = React.createClass({
    render: function() {
      return ( 
      <div id="chart-container"></div>
      );
    }

  });

  ReactDOM.render( < ReactFC {...barChartConfigs
    }
    />,
    document.getElementById('top')
  );
});