JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-bootstrap.min.css">
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<div id="container">
<div id="chart1">
</div>
</div>

JavaScript

$("#chart1").kendoChart(
  {
      "title": { "text": "Gender Summay based on the total" },
      "legend": { "position": "bottom" },
      "series":
          [
              {
                  "name": "2010 Bah", "type": "column", "data": [54, 5],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }, {
                  "name": "2010 Non Bah", "type": "column", "data": [24, 21],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }, {
                  "name": "2011 Bah", "type": "column", "data": [54, 5],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }, {
                  "name": "2011 Non Bah", "type": "column", "data": [24, 21],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }, {
                  "name": "2012 Bah", "type": "column", "data": [10, 52],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }, {
                  "name": "2012 Non Bah", "type": "column", "data": [12, 65],
                  "labels": {
                      "background": "transparent", "template": "#= series.name #", "visible": true
                  }
              }], "categoryAxis": [{ "justified": true, "categories": ["Male", "FeMale"] }], "tooltip": { "format": "{0}", "template": "#= series.name # : #= value #", "visible": true }
  });