JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css">
<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
    <div id="grid" style="height: 380px"></div>
</div>

CSS

.chart-wrapper {
  position: relative;
}

.chart-wrapper ul {
  font-size: 11px;
  margin: 62px 16px 0 0;
  padding: 30px;
  position: absolute;
  right: 0;
  top: 0;
  text-transform: uppercase;
  width: 150px;
  height: 105px;
}

.clrBlack {
  color: black;
}

JavaScript

var currentRadius = 0;
var previous = undefined;

var jobGrowth = [
    {
        growth      : 1200,
        jobs        : 110000,
        applications: 500000,
        company     : "Microsoft",
        color       : "#8ebc00"
    },
    {
        growth      : 1000,
        jobs        : 113400,
        applications: 760000,
        company     : "Starbucks",
        color       : "#8ebc00"
    },
    {
        growth      : 1200,
        jobs        : 113000,
        applications: 700000,
        company     : "Google",
        color       : "#8ebc00"
    },
    {
        growth      : 1100,
        jobs        : 120000,
        applications: 700000,
        company     : "Publix Super Markets",
        color       : "#8ebc00"
    },
    {
        growth      : 2400,
        jobs        : 30000,
        applications: 300000,
        company     : "PricewaterhouseCoopers",
        color       : "#8ebc00"
    },
    {
        growth      : 2450,
        jobs        : 34000,
        applications: 90000,
        company     : "Cisco",
        color       : "#8ebc00"
    },
    {
        growth      : 2700,
        jobs        : 34000,
        applications: 400000,
        company     : "Accenture",
        color       : "#8ebc00"
    },
    {
        growth      : 2900,
        jobs        : 40000,
        applications: 450000,
        company     : "Deloitte",
        color       : "#8ebc00"
    },
    {
        growth      : 3000,
        jobs        : 55000,
        applications: 900000,
        company     : "Whole Foods Market",
        color       : "#8ebc00"
    },
    {
        growth      : 7000,
        jobs        : 55000,
        applications: 900000,
        company     : "Target",
        color       : "#8ebc00"
    }
];


function createChart() {
    $("#chart").kendoChart({
        theme     : $(document).data("kendoSkin") || "default",
        title     : {
            text: "Job Growth for 2011"
        },
        legend    : {
           ...