JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<body>
    <div id="diagram"></div>
</body>

JavaScript

var Point = kendo.dataviz.diagram.Point;
var diagram = $("#diagram").kendoDiagram({}).getKendoDiagram();
var shapeA = diagram.addShape(new Point(600, 100));
var shapeB = diagram.addShape(new Point(400, 100));
var connection = diagram.connect(shapeA, shapeB, {
    stroke: {
        color: "red",
        width: 2
    },
    hover: {
        stroke: {
            color: "blue"
        }
    },
    type: "Polyline",
    
    startCap: "FilledCircle",
    endCap: "ArrowEnd",

    points: [
    new Point(150, 100),
    new Point(150, 150),
    new Point(200, 150),
    new Point(200, 100)]

});
connection.redraw({
    stroke: {
        color: "orange"
    }
});