JSFiddle - React, Tailwind, and code Playground

by clairey

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css">
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="example">
    <div class="demo-section k-content">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    
</div>

JavaScript

function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Total Components Delivered"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "Widgets",
                    data: [3, 1, 11, 21]
                }, {
                    name: "Selectors",
                      data: [2, 5, 7, 8]
                }],
                valueAxis: {
                  
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: ["Sitefinity 7.2","Sitefinity 7.3", "Sitefinity 8.0", "Sitefinity 8.1"],
                    line: {
                        visible: false
                    },
                    
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);