JSFiddle - React, Tailwind, and code Playground

by CMeyers

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<p>Javascript code taken directly from kendo demo code pane, with modification from another example to get multiple axis.  As can be seen, when the second axis is negative the chart does not behave correctly.  This also occurs in the MVC version of the chart, which is where this issue was initially found, but it is easier to use kendo as an example.</p>   
<br/>
        <div id="example" class="k-content">
            <div class="configuration k-widget k-header" style="width:170px;">
                <span class="configHead">API Functions</span>
                <ul class="options">
                    <li>
                        <input id="typeColumn" name="seriesType"
                                type="radio" value="column" checked="checked" autocomplete="off" />
                        <label for="typeColumn">Columns</label>
                    </li>
                    <li>
                        <input id="typeBar" name="seriesType"
                                type="radio" value="bar" autocomplete="off" />
                        <label for="typeBar">Bars</label>
                    </li>
                    <li>
                        <input id="typeLine" name="seriesType"
                                type="radio" value="line" autocomplete="off" />
                        <label for="typeLine">Lines</label>
                    </li>
                    <li>
                        <input id="stack" type="checkbox" autocomplete="off" checked="checked" />
                        <label for="stack">Stacked</label>
                    </li>
                </ul>
                <p>
      ...

CSS

.chart-wrapper {
                    margin: 0 0 0 20px;
                    width: 466px;
                    height: 434px;
                    background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
                }
                
                .chart-wrapper .k-chart {
                    height: 280px;
                    padding: 37px;
                    width: 390px;
                }

JavaScript

function createChart() {
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: "Internet Users"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "column",
            stack: false
        },
        series: [{
            name: "United States",
            data: [67.96, 68.93, 75, 74, 78],
            // Line chart marker type
            markers: {
                type: "square"
            },
            axis: "us"},
        {
            name: "World",
            data: [-15.7, -16.7, -20, -23.5, -26.6],
            axis: "world"}
                    ],
        valueAxis: [
            {
                name: "us",
                title: {
                    text: "US percent"
                },
                color: "#ec5e0a"
            },
            {
                name: "world",
                title: {
                    text: "World percent"
                },
                color: "#a0a700"
            }
        ],
        categoryAxis: {
            categories: [2005, 2006, 2007, 2008, 2009],
            axisCrossingValue: [0, 100]
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

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

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

    $(".configuration").bind("change", refresh);
});

function refresh() {
    var chart = $("#chart").data("kendoChart"),
        series = chart.options.series,
        type = $("input[name=seriesType]:checked").val(),
        stack = $("#stack").prop("checked");

    for (var i = 0, length = series.length; i < length; i++) {
        series[i].stack = stack;
        series[i].type =...