JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn1.zingchart.com/scripts/zingchart/html5_scripts/zingchart-html5-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    ADD DATA
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" id="option2" tabindex="-1" onclick="x2y1();">Cocoa (2012-2013)</a></li>
      <li role="presentation"><a role="menuitem" id="option1" tabindex="-1" onclick="x1y2();">Sugar (2013-2014)</a></li>
      <li role="presentation"><a role="menuitem" id="option3" tabindex="-1" onclick="x2y2();">Sugar (2012-2013)</a></li>
  </ul>
</div>
<br>
<div id="chartDiv"></div>

CSS

.hovered { background-color:#ddd;color:#3875D7; }
body { background-color:#f4f4f4; }

JavaScript

-

var chartData={
	"type":"line",
    "background-color":"none",
    "-title":{
        "background-color":"none",
        "text":"Crude Oil vs. Natural Gas<br>Year-Over-Year",
        "bold":0,
        "color":"black"
    },
    "plotarea":{
            "margin":"40 40 40 50"
        },
    "crosshair-x":{},
    "plot":{
        "rules":[
            {
                "rule":"%v < %pavg",
                "line-color":"#c30"
            }
        ],
        "line-width":2,
            "marker":{
                "type":"circle",
                "background-color":"#fff",
                "border-color":"#cc3300",
                "border-width":"2px"
            },
            "shadow":"false",
            "zooming":true
    },
	"scale-x":{
        "line-width":0,
            "tick":{
                "visible":false
            },
            "zooming":true,
            "guide":{
                "visible":false
            },
            "item":{
                "visible":true
            },
        "max-items":12,
        "mirrored":1
	},
	"scale-y":{
        "label":{
            "text":"Cocoa (<span style='color:#cc3300;'>13-14</span>)",
            "bold":0
        },
        "line-width":0,
            "tick":{
                "visible":false
            },
            "guide":{
                "visible":true,
                "line-color":"#333",
                "line-width":"1px",
                "line-style":"solid"
            }
	},
	"scale-x-2":{
        "line-width":0,
            "tick":{
                "visible":false
            },
            "zooming":true,
            "guide":{
                "visible":false
            },
            "item":{
                "visible":true
            },
        "mirrored":1,
        "max-items":12,
		"visible":0
	},
	"scale-y-2":{
        "values":"1:7:1",
        "label":{
            "text":"Sugar (<span style='color:#1B325E;'>13-14</span>)",
            "bold":0,
            "font-angle":270
        },
      ...