JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js">   </script>
<div id="chart"></div>

JavaScript

var stats2 = [
    {
        x: 100
        , y: 300
        ,k: 400,
        clr:'blue'

    }
    , {
        x: 11.69873026677616
       ,y: 599.992440081194
        ,k: 500,
        clr:'blue'
    }
    , {
        x: 6.00217915242074
        , y: 699.98799853571
        ,k: 800,
        clr:'yellow'
    }
    , {
        x: 123.85446249323765
        , y: 500.986136830373
        ,k: 800,
        clr:'yellow'
    }
    , {
        x: 155.4658456244775
        , y: 1099.977901038699
        ,k:1100,
        clr:'yellow'
    }
    , {
        x: 162.26067838482256
        , y: 1494.94787950881
        ,k: 1200,
        clr:'red'
    }
    , {
        x: -4.07983548814565
        ,y: 1934.87946942842
        ,k: 1500,
        clr:'red'
    }
];

function createChart() {
    $("#chart")
        .kendoChart({
            xAxis: {},
            yAxis: {},
            seriesDefaults: {type: "scatterLine" },
            series: [{data: stats2,colorField: "clr"}],
  })
}



$(document)
    .ready(createChart);