JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.default.min.css">
<div id="radar"></div>

JavaScript

var shoesDataSource = new kendo.data.DataSource({ data: [
    {
        Name: "MT00 Minimus Zero",
        Brand: "New Balance",
        MorningRuns: 8,
        AfternoonRuns: 4,
        CurrentMileage: "156",
        MaxMileage: "500",
        ASIN: "B009KZ3SLE"
    },
    {
        Name: "Cascadia 7",
        Brand: "Brooks",
        MorningRuns: 9,
        AfternoonRuns: 9,
        CurrentMileage: "367",
        MaxMileage: "300",
        ASIN: "B005ARF4U4"
    },
    {
        Name: "Fivefinger KomodoSport",
        Brand: "Vibram",
        MorningRuns: 4,
        AfternoonRuns: 9,
        CurrentMileage: "332",
        MaxMileage: "450",
        ASIN: "B002F5440U"
    },
    {
        Name: "Free Run 3+",
        Brand: "Nike",
        MorningRuns: 4,
        AfternoonRuns: 7,
        CurrentMileage: "25",
        MaxMileage: "350",
        ASIN: "B008HORLC6"
    }
]});

$('#radar').kendoChart({
    theme: "bootstrap",
    title: { text: "Distribution of Runs By Time of Day"},
    legend: { position: "bottom" },
    dataSource: shoesDataSource,
    seriesDefaults: { type: "radarLine" },
    series: [{
        name: "Morning Runs",
        field: "MorningRuns"
    },
             {
                 name: "Afternoon Runs",
                 field: "AfternoonRuns"
             }],
    categoryAxis: {
        field: "Name"
    },
    tooltip: {
        visible: true
    },
    valueAxis: {
        labels: {
            template: "#= value # mi"
        }
    }
});