JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

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

JavaScript

function createChart() {
    $("#chart").kendoChart({
        seriesDefaults: {
            type: "line"
        },
        series: [{
            name: "World",
            data: [50, 20, 40, 70, 10]}],
        valueAxis: {
            labels: {
                format: "{0}%"
            }
        },
        categoryAxis: {
            categories: ["August 2011", "September 2011", "october 2011", "November 2011", "December 2011"],
            labels: {
                rotation: 270
            }
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

$(document).ready(function() {
    setTimeout(function() {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        $("#example").bind("kendo:skinChange", function(e) {
            createChart();
        });
    }, 400);
});