JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="chart"></div>

JavaScript

$("#chart").kendoChart(
    {
     "title":{"text":"Issues Waterfall"},
     "legend":
        {"position":"top",
         "margin":
         {"top":20,"right":50,"bottom":20,"left":50},
         "visible":false},
        "series":[
            {"name":"Total","color":"Blue","type":"column","stack":"Total","data":[{"value":100,"category":"Total"}]},
            {"name":"First One","opacity":0,"tooltip":{"visible":false},"color":"White","type":"column","stack":"First One","data":[{"value":40,"category":"First One"}],"labels":{"visible":false}},
            {"name":"First One","color":"red","type":"column","stack":"First One","data":[{"value":15,"category":"First One"}],"labels":{"format":"{0:n2}%","visible":true,"position":"outsideEnd"}},
            {"name":"Actual","color":"Green","type":"column","stack":"Actual","data":[{"value":15,"category":"Actual"}],"labels":{"format":"{0:n2}%","visible":true,"position":"outsideEnd"}}
        ],
        "categoryAxis":{categories:["a","b","c"]},
        "valueAxis":[{"labels":{"format":"{0:n0}%"},"min":0,"max":100}],
        "tooltip":{"template":"#= series.name #: #= kendo.format(\u0027{0:n2}\u0027, value) #","visible":true}});