JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    
	<title>Realtime Data with TI LaunchPad & EON Realtime Dashboards</title>


	<!-- ### EON -->

	<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.9/eon.js"></script>
	<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.9/eon.css" />

	<!-- ### /EON -->

  </head>
  <body>
    <div>
        <div class="main">
		  <h1>Realtime Data with TI LaunchPad & EON Realtime Dashboards</h1>
		    <p>D3 powered spline & gauge charts that update when it recieves information from the PubNub data stream network. </p>
            <div>Powered by:
                <p class="partners">
                    <img class="logo" src="https://www.pubnub.com/static/images/structure/pubnub-logo.png"/>
                    +
                    <img class="logo" src="http://processors.wiki.ti.com/images/3/39/Ti_stk_1c_rev_rgb_png.png"/>
                </p>
            </div>
		</div>
        <h2 class="main">Spline Chart</h2>
        <div id="chartSpline"></div>
        <h2 class="main">Ambient Light</h2>
        <div id="chart"></div>
        <h2 class="main">Moisture Level</h2>
        <div id="chart2"></div>
    </div>


 </body>
</html>

CSS

body {
	    background-color: #383838;
		margin: auto;
        font-family: Verdana, Geneva, sans-serif;
		padding: 5px;
        width: 80%;
	}
	.map {
		width: 100%;
		height: 500px;
	}
	.map, #chart {
		margin-top: 60px;
		margin-bottom: 40px;
	}
	.main {
        //background-color: #FF3C3C;
        padding: 10px;
        color:#FEFEFE;   
        border-bottom: 4px solid #efefef;
        border-color: #888888;
	}
    .tick text {
        fill:#EFEFEF;
    }
    .c3-legend-item text{
        fill:#EFEFEF;
    }
    .c3-chart-arc .c3-gauge-value { 
        fill:#EFEFEF !important;
    }
    .c3-chart-arcs .c3-chart-arcs-gauge-unit {
        fill:#747474 !important;
        font-size: 10px !important;
    }
    .c3-axis-y-label, .c3-axis-y2-label{
        fill:#747474 !important;
    }
    .partners{
        margin:auto;
        vertical-align: middle;
        display:inline-block;
        font-size:50px;
        color:#565656;
    }
    .logo{
        height:40px;
        margin: 0px 10px 0px 10px;
    }

JavaScript

var pubnub = PUBNUB.init({
    publish_key: 'pub-c-0721ea99-4c3a-4ab3-bbc0-ffd5f070d95b',
    subscribe_key: 'sub-c-71b81474-593b-11e4-8cbc-02ee2ddab7fe',
    ssl: (('https:' == document.location.protocol) ? true : false)
  });
  
  var channel = "hello_world";

// SPLINE CHART
eon.chart({
  channel: channel,
  history: true,
  flow: true,
  pubnub: pubnub,
  x_type: "auto",
  interaction: {
   enabled: true
  },
  generate: {
    bindto: '#chartSpline',
    data: {
      labels: true,
      axes: {
        MOISTURE: 'y2' // ADD
      }
    },
    axis: {
      y: {
        label: { // ADD
          text: 'LIGHT',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true, // ADD
        label: { // ADD
          text: 'MOISTURE',
          position: 'outer-middle'
        }
      },
      x: {
      	type: 'timeseries',
       	tick: {
        	rotate: 75,
            multiline: false
        },
        height: 130
      }
    },
    color: {
    	pattern:['#00bbcc','#CC0000']
    },
    legend: {
    	hide: ['myName'] // Hide elements from showing up in element
    }
  },
  transform: function(m) { // Select which elements of JSON payload
        return {
           eon: {
    	    		'LIGHT': JSON.stringify(m.eon.LIGHT),
              'MOISTURE': JSON.stringify(m.eon.MOISTURE)
	    	    }
           }
    },
    

});
  // GAUGE FOR LIGHT
  eon.chart({
    pubnub: pubnub,
    channel: channel,
    generate: {
      bindto: '#chart',
      data: {
        type: 'gauge',
      },
      gauge: {
        min: 0,
        max: 1023
      },
      color: {
        pattern: ['#FF0000', '#F6C600', '#60B044'],
        threshold: {
          values: [300, 600, 900]
        }
      }
    },
 		transform: function(m) { // Select which elements of JSON payload
      return {
         eon: {
       		'LIGHT': JSON.stringify(m.eon.LIGHT)
	  	   }
      }
    }
  });
  
  // GAUGE FOR LIGHT
  eon.chart({
    pubnub: pubnub,
    channel: channel,
   ...