JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<h1>Chart</h1>
<div id="window">
    <div id="chart2" style="width: 500px; height: 500px"></div>
</div>
<a id="go">go</a>
<div id="chart" style="width: 220px; height: 200px"></div>

JavaScript

var xdata = [
    {"One":100,"Two":90,"Three":80,"Four":70,"Five":60,"year":"2008"},
    {"One":null,"Two":null,"Three":null,"Four":70,"Five":60,"year":"2009"},
    {"One":100,"Two":90,"Three":80,"Four":70,"Five":60,"year":"2010"},
    {"Four":70,"Five":60,"year":"2011"},
    {"One":100,"Two":90,"Three":80,"Four":70,"Five":60,"year":"2012"}
]

function chart(dom) {
    $(dom).kendoChart({
        title: {
            text: "Chart"
        },
        dataSource: {
            data: xdata, 
            sort: {
                field: "year",
                dir: "asc"
            }
        },
        seriesDefaults: {
            type: "line",   
        },
        series: [{
            field: "One",
        }, {
            field: "Two",
        }, {
            field: "Three",
        }, {
            field: "Four",
        }, {
            field: "Five",
        }],
        categoryAxis: {
            field: "year"
        },
    transitions: true            
    });
}
$(document).ready(function () {
    chart($("#chart"));
    var thewindow = $("#window").kendoWindow({
        modal: true,
        draggable: false,
        resizable: false,
        visible: false
    }).data("kendoWindow");

    $("#go").click(function () {
        var thewindow = $("#window").data("kendoWindow");
        thewindow.center();
        thewindow.open();        
        chart($("#chart2"));
    });
});