JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">
    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

CSS

.chart-wrapper, .chart-wrapper .k-chart {
    height: 300px;
}

.ob-offset {
}

JavaScript

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Site Visitors"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "column",
            labels: {
                visible: true,
                background: "transparent",
                
            }
        },
        series: [
            {
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, 
            {
                name: "Unique visitors",
                data: series2,
                gap: 1.0,
                labels: {
                    visible: true,
                    position: "top",
                    padding: {
                        top: -24
                    }
                }
            }
        ],
        valueAxis: {
            min: -200000,
            max: 200000,
            axisCrossingValue: 50000,  
            line: {
                visible: false
            },
            title: {
                text: "Availability"
            },
            
            color: 'blue'
        },
        categoryAxis: {
            color: "blue",
            width: 25,
            majorGridLines: {
                visible: true,
                position: "bottom"
            },
            line: {
                width: 3,
            }
        },
        tooltip: {
            visible: true,
            format: "{0}"
        }
    });
}

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

$(document).ready(function () {
    createChart();
    
    $("#example").bind("kendo:skinChange", createChart);
    
    var chart = $("#chart").data("kendoChart"),
        firstSeries = chart.options.series;
});