JSFiddle - React, Tailwind, and code Playground

by brainsengineering

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;
    }

JavaScript

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Site Visitors"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "bar",
            labels: {
                visible: true,
                background: "transparent",
                
            }
        },
        series: [{
            name: "Total Visits",
            data: series1,
            gap: 1.0,
            spacing: 0
        }, {
            name: "Unique visitors",
            data: series2,
            gap: 1.0
        }],
        valueAxis: {
            min: -100000,
            max: 160000,
            axisCrossingValue: -100000, 
            line: {
                visible: false
            },
            title: {
                text: "Availability"
            },
        },
        categoryAxis: {
             categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            majorGridLines: {
                visible: true,
                position: "bottom"
            }
        },
        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;
});