JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[chart]" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
</head>
<body>
<div id='container' style='width:400px'>
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom",
labels:
{
template: "#= text # (#= value #%)"
}
},
seriesDefaults: {
labels: {
background: "lightgreen",
visible: true,
padding:5,
width:1000,
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
border: {
width:2
}
},
padding: 110
},
series: [{
type: "pie",
data: [ {
category: "Hydro Power ",
value: 22
}, {
category: "Solar Energy",
value: 2
}, {
category: "Nuclear",
...