JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>

JavaScript

var dataItems = [
    {
        "series": "item1",
        "category": "Men",
        "value": 85
    },
    {
        "series": "item2",
        "category": "Men",
        "value": 92
    },
        {
        "series": "item3",
        "category": "Men",
        "value": 98
    },
    {
        "series": "item4",
        "category": "Men",
        "value": 104
    },
        {
        "series": "item5",
        "category": "Men",
        "value": 54
    },
    {
        "series": "item7",
        "category": "Women",
        "value": 50
    },
        {
        "series": "item8",
        "category": "Women",
        "value": 55
    },
    {
        "series": "item9",
        "category": "Women",
        "value": 56
    },
        {
        "series": "item10",
        "category": "Women",
        "value": 95
    }
];


function createChart() {
  $("#chart").kendoChart({
    dataSource: {
        data: dataItems,
        group: { field: "series", order: "asc" }
    },
    series: [
        {
            type: 'column',
            stack: true,
            field: 'value'
        }
    ],
    valueAxis: {
        max: 1000,
        reverse:true,
        labels: {
            font: "12pt segoe ui"
        }
    },
    categoryAxis: {
        field: 'category',
        labels: {
            font: "16pt segoe ui"
        }
    },
   /* legend: {
        labels: {
            font: "12pt segoe ui"
        }
    },*/
        tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
        },
    //width: 500,
    //theme: 'light'
});
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);