JSFiddle - React, Tailwind, and code Playground

by ashriva

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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="stackBarChart">
        </div>
        <script>
                    function stackBarChart() 
                    {
                        var stack_chart_datasource = [{"categoryStackBarChart":"SHORT","typeStackBarChart":"Energy","valueStackBarChart":38.0,"barColor":"#008000"},{"categoryStackBarChart":"SHORT","typeStackBarChart":"Financials","valueStackBarChart":50.0,"barColor":"#008000"},{"categoryStackBarChart":"SHORT","typeStackBarChart":"Utilities","valueStackBarChart":20.0,"barColor":"#008000"},{"categoryStackBarChart":"LONG","typeStackBarChart":"Energy","valueStackBarChart":22.0,"barColor":"#0000FF"},{"categoryStackBarChart":"LONG","typeStackBarChart":"Financials","valueStackBarChart":30.0,"barColor":"#0000FF"},{"categoryStackBarChart":"LONG","typeStackBarChart":"Utilities","valueStackBarChart":45.0,"barColor":"#0000FF"},{"categoryStackBarChart":"FLAT","typeStackBarChart":"Energy","valueStackBarChart":40.0,"barColor":"#FF0000"},{"categoryStackBarChart":"FLAT","typeStackBarChart":"Financials","valueStackBarChart":20.0,"barColor":"#FF0000"},{"categoryStackBarChart":"FLAT","typeStackBarChart":"Utilities","valueStackBarChart":35.0,"barColor":"#FF0000"}];
                        $("#stackBarChart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default"
                        ,
                        dataSource: { data: stack_chart_datasource, group: { field: "categoryStackBarChart" } }
                        ,
                        transition: false
                        ,
                        series: [ { type: "column", field: "valueStackBarChart", colorField: "barColor" } ]
                        ,
                        seriesDefaults: { stack: true }
                   ...