JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<button id="button">Please Click here to Set Series</button>
<div id="chart"></div>

JavaScript

$("#chart").kendoChart({
    title: {
        text: "Share of Internet Population Growth"
    },
    legend: {
        visible: true
    },
    seriesDefaults: {
        type: "donut"
    },
    //series: series,                
    tooltip: {
        visible: true,
        template: "#= category # (#= series.name #): #= value #%"
    }
});

var series =   [{
    name: "2011",
    data: [{
        category: "Asia",
        value: 30.8,
        color: "#9de219"
    },{
        category: "Europe",
        value: 21.1,
        color: "#90cc38"
    },{
        category: "Latin America",
        value: 16.3,
        color: "#068c35"
    }]
}];

$("#button").click(function(){
    var chart = $("#chart").data("kendoChart");
    chart.setOptions({ series: series})
});