FusionCharts - Create Chart using React-FusionCharts Plugin - JSFiddle - JSFiddle - JSFiddle - JSFiddle - JSFiddle - JSFiddle

Demo #10 --- Customizing Hover effects in Map -------------------------------------------------- Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://unpkg.com/[email protected]/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/react-fusioncharts/dist/react-fusioncharts.js"></script>
<script src="https://csm.fusioncharts.com/projects/themes/hulk-light.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/JSXTransformer.js"></script>
<script src="https://reactjs.org/js/jsfiddle-integration.js"></script>

<div class="container-fluid" style="">
  <div class="row">
    <nav id="corenav" class="col-sm-3 col-sm-2 hidden-xs-down navbar-light">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" id="nn" href="#" >Chart Type </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="kk" href="#" >Chart Attribute</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="ss" href="#" >Chart Data</a>
        </li>

      </ul>
    </nav>
    <div class="col-sm-8 col-md-2">
      <div id="top"></div>
      <div id='controllers'></div>
    </div>
  </div>
</div>

CSS

@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;
}

.container-fluid {
  height: 1000px;
}

.row {
  height: 100%;
}

.nav {
  margin-top: 50px;
}

.nav > li > a:hover {
  background-color: #5F6064;
  color: #FFFFFF;
}

#corenav {
  background-color: #2A2D34;
}

.nav-link {
  color: #FFFFFF;
}

#controllers {
  width: 550px;
  margin-top: 20px;
}

#controllers label {
  padding: 0 5x;
  padding-top: 10px;
}

.nav-pills .nav-link {
    border-radius: 0rem;
}

a {
  color: #76D6B2;
}

#data {
    background-color: #F8F8F8;
    color: #F0506E;
    font-family: Consolas,monaco,monospace;
}

#dataChange {
  text-align: center;
  margin-top: 10px;
}

label {
margin-right: 10px;
}

JavaScript 1.7

FusionCharts.ready(function() {
      var myDataSource = {
        "chart": {
          "caption": "Top Global Oil Reserves",
          "subCaption": "[2015-16]",
          "xAxisName": "MMbbl= One Million barrels",
          "yAxisName": "Reserves (MMbbl)",
          // extra attributes  
          "numberSuffix": "K",
          "showValues": "0",
          "showLabels": "0",
          "showHoverEffect": "1",
          "use3DLighting": "0",
          "showaxislines": "1",
          "theme": "hulk-light"

        },
        "data": [{
          "label": "Venezuela",
          "value": "290"
        }, {
          "label": "Saudi",
          "value": "260"
        }, {
          "label": "Canada",
          "value": "180"
        }, {
          "label": "Iran",
          "value": "140"
        }, {
          "label": "Russia",
          "value": "115"
        }, {
          "label": "UAE",
          "value": "100"
        }, {
          "label": "US",
          "value": "30"
        }, {
          "label": "China",
          "value": "30"
        }]
      };


      var chartConfigs = {
        type: 'column2d',
        renderAt: 'chart-container',
        width: '550',
        height: '350',
        dataFormat: 'json',
        dataSource: myDataSource
      };
      var MyApp = React.createClass({
        render: function() {
          return ( <div id = "chart-container" > </div>



          );
        }

      });

      const element = ( <div>
        Change Chart Type: 
        <br /><label>
        <input name = 'chart-type'
        id = 'columntype'
        type = 'radio'
        value = 'column2d'/> Column </label> <label >
        <input name = 'chart-type'
        id = 'linetype'
        type = 'radio'
        value = 'line'/> Line </label>

        <label>
        <input name = 'chart-type'
        id = 'bartype'
        type = 'radio'
        value = 'bar2d'/> Bar </label> <label>
        <input name = 'chart-type'
        id = 'ptype'
        type =...