JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<div class="chart-wrapper" style="margin: auto;">
    <div id="chart"></div>
</div>

JavaScript

function createChart() {
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: 'Spain electricity production (GWh)',
            align: 'left'
        },
        legend: {
            position: 'right'
        },
        series: [{
            type: "line",
            dashType: 'dash',
            name: "World",
            data: [15.7, 16.7, 20, 23.5, 26.6],
            axis: 'Green',
            width: 2,markers: {
            visible: false
            }                           
        }, {
            type: "column",
            name: "United States",
            data: [67.96, 68.93, 75, 74, 78],
            axis: 'Nuclear'
        }],
        categoryAxis: {
            field: 'year'
        },
        valueAxis: [{
            name: 'Green',
            majorUnit: 200,
            title: {
                text: 'Non-fosile energy'
            }

        }, {
            name: 'Nuclear',
            majorUnit: 100,
            title: {
                text: 'Nuclear energy'
            }

        }

        ],
        tooltip: {
            visible: true
        }

    }

    );
}


$(document).ready(function () {
    setTimeout(function () {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        $("#chart").bind("kendo:skinChange", function (e) {
            createChart();
        });
    }, 400);
});