JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.bootstrap.min.css">
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.805/js/kendo.aspnetmvc.min.js"></script>
 
        <div id="chart"></div>

JavaScript

jQuery("#chart").kendoChart({
    "chartArea": {
        "height": 500
    },
    "title": {
        "text": "Working women in Bahrain"
    },
    "legend": {
        "labels": {
            "template": "#= series.name #"
        },
        "position": "top"
    },
    "series": [{
        "name": "Divorced",
        "type": "column",
        "data": [85393, 77464, 96399, 83679, 115378, 96117, 81731, 77118, 86773, 89057, 101897, 81349],
     
        "stack": false
    }, {
        "name": "Married",
        "type": "bar",
        "data": [77220, 85787, 94838, 92456, 93399, 89375, 79801, 87342, 105411, 100824, 94300, 92005],        
        "stack": true
    }, {
        "name": "Single",
        "type": "column",
        "data": [102443, 91787, 100185, 86968, 99938, 104390, 102129, 98333, 92575, 69093, 88107, 84893],        
        "stack": false
    }, {
        "name": "Widow",
        "type": "column",
        "data": [97150, 85356, 97143, 95212, 97313, 93572, 87118, 91988, 103927, 91054, 93480, 90099],        
        "stack": false
    }],
    "categoryAxis": [{
        "labels": {
            "rotation": {
                "angle": "auto"
            }
        },
        "majorGridLines": {
            "visible": false
        },
        "title": {
            "text": "Sectors",
            "position": "left"
        },
        "categories": ["Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public", "Private", "Public"]
    }, {
        "labels": {
            "rotation": {
                "angle": "auto"
            }
        },
        "majorGridLines": {
            "visible": true
        },
        "line": {
            "visible": true
        },
        "title": {
            "text": "Year",
            "position": "left"
        },
        "categories": ["2010", "2011", "2012", "2013", "2014", "2015"]
    }],
    "valueAxis": [{
        "majorGridLines": {
            "visible": false
        }
    }], ...