JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height:368px; width: 650px"></div>
<div class="zoom_controls"> <a href="#" data-chart="line" data-range="Ytd">YTD</a>
 <a href="#" data-chart="line" data-range="3m">3m</a>
 <a href="#" data-chart="line" data-range="6m">6m</a>
 <a href="#" data-chart="line" data-range="1y">1y</a>
 <a href="#" data-chart="line" data-range="2y">2y</a>
 <a href="#" data-chart="line" data-range="3y">3y</a>
 <a href="#" data-chart="line" data-range="5y">5y</a>
 <a href="#" data-chart="line" data-range="10y">10y</a>

</div>

CSS

.highcharts-scrollbar{
        display:none;
}
.zoom_controls a {

    display: block;

    width: 30px;

    height: 16px;

    line-height: 16px;

    margin-top: 3px;

    float: left;

    text-decoration: none;

    color: black !important;

    text-align: center;

    border: 1px #CCC inset;

    background-color: #aaa;

    /* Should look a lot like the original :) */

    background-image: linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);

    background-image: -o-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);

    background-image: -moz-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);

    background-image: -webkit-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);

    background-image: -ms-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);

}

.zoom_controls a:hover {

    background-color: #a6d1ff;

    background-image: linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);

    background-image: -o-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);

    background-image: -moz-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);

    background-image: -webkit-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);

    background-image: -ms-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);

}

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        $('.zoom_controls a').click(function (e) {
            e.preventDefault();
            // OK, pretty ugly :)
            var call = 'zoom' + $(this).attr('data-range');
            // I have two globally accessible charts here:
            if ($(this).attr('data-chart') == 'line') {
                lineChart[call]();
            } else {
                candleChart[call]();
            }
            $(this).addClass('active');

        });
        var proto = Highcharts.Chart.prototype;
        proto.zoomToD = function (delta) {
            var chartMin = this.xAxis[1].min;
            var chartMax = this.xAxis[0].max;
            var min = chartMax - delta;

            if (chartMin < min) {
                // this.xAxis[0] is the view, this.xAxis[1] is the navigator
                this.xAxis[0].setExtremes(min, chartMax, false);
                this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
                return true;
            }

            this.xAxis[0].setExtremes(chartMin, chartMax, false);
            this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
            return false;
        };

        proto.zoom3m = function () {
            return this.zoomToD(2592000 * 3 * 1000);
        };
        proto.zoom6m = function () {
            return this.zoomToD(2592000 * 6 * 1000);
        };
        proto.zoom1y = function () {
            return this.zoomToD(2592000 * 12 * 1000);
        };
        proto.zoom2y = function () {
            return this.zoomToD(2592000 * 24 * 1000);
        };
        proto.zoom3y = function () {
            return this.zoomToD(2592000 * 36 * 1000);
        };
        proto.zoom5y = function () {
            return this.zoomToD(2592000 * 60 * 1000);
        };
        proto.zoom10y = function () {
            return this.zoomToD(2592000...