JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css">
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<div class="demo-section k-content">
  <div id="stock-chart" style="background: center no-repeat url('http://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png');"></div>
  <div class="chart-loading"></div>
</div>

JavaScript

$(document).ready(function() {
          // Spin all loading indicators on the page
          kendo.ui.progress($(".chart-loading"), true);

          createChart();

        });

        function createChart() {
          $("#stock-chart").kendoStockChart({
            theme: "blueOpal",
            chartArea: {
              background: "transparent"
            },
            dataSource: {
              transport: {
                read: {
                  url: "http://vamoss.brainsen.com/API/Get.aspx?mkt=271&cm=84&pt=15",
                  dataType: "json"
                }
              },
              schema: {
                model: {
                  fields: {
                    Date: {
                      type: "date"
                    }
                  }
                }
              }
            },
            render: function(e) {
              // Clear up the loading indicator for this chart
              var loading = $(".chart-loading", e.sender.element.parent());
              kendo.ui.progress(loading, false);
            },
            title: {
              text: "Kabul Market\nWheat",
              font: "bold italic 14px Arial,Helvetica,sans-serif"
            },
            dateField: "Date",
            legend: {
              background: "#ddd",
              position: "bottom",
              visible: true
            },

            // BEGIN CHANGES 2015/06/01
            categoryAxis: [{
              name: "labelAxis",
              type: "date",
              field: "Date",
              baseUnit: "fit",
              maxDateGroups: 18, //IS THIS IGNORED? WHY?
              labels: {
                rotation: 0,
                dateFormats: {
                  minutes: "HH:mm",
                  hours: "HH:mm",
                  days: "MMM yy",
                  weeks: "MMM\nyy",
                  months: "MMM\nyyyy",
                  years: "yyyy"
                }
              },
            }, {
              name:...