JSFiddle - React, Tailwind, and code Playground

HTML

<div id="barchart"></div>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

JavaScript

$(function () {
        setUpCharts();
    });

    function setUpCharts() {
        $("#barchart").kendoChart({
            dataSource: {
                data: [
                    { field: "Cat 1", left: -.80, right: 0 },
                    { field: "Cat 2", left: -.56, right: 0 },
                    { field: "Cat 3", left: 0, right: .69 },
                    { field: "Cat 4", left: 0, right: .29 },
                    { field: "Cat 5", left: 0, right: .58 }
                ]
            },
            title: {
                text: "Bar Chart"
            },
            legend: {
                visible: true,
                position: "bottom"
            },
            seriesDefaults: {
                type: "bar",
                stack: true
            },
            series: [{
                data: [0, 0, .69, .29, .85],
                field: "right"
            }, {
                data: [-.80, -.56, 0, 0, 0],
                field: "left" 
            }],
            categoryAxis: {
                field: "field",
                labels: {
                    template: function(e) {
                        if (e.dataItem.right === 0) {
                            return "<tspan style='position: absolute' dx='20'>" + e.value + "</tspan>"
                        }
                        else {
                            return "<tspan style='position: absolute' dx='-30'>" + e.value + "</tspan>"
                        }
                    }
                },
                majorGridLines: {
                    visible: false
                },
            },
            valueAxis: {
                numeric: true,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            }
        });
    }