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>
<div class="block_1"></div> <hr />
CSS
hr { float: right; margin-top: -95px;position: relative; width:10%; height:2px; background: #000; }
JavaScript
function createChart() {
$("#chart")
.kendoChart({
xAxis: {
min: -5000
, axisCrossingValue: [-5000, 0]
}
, yAxis: {
reverse: true
, labels: {
format: "{0}"
}
},
legend: {
visible: true,
labels: { padding: 10}
}
, seriesDefaults: {
type: "scatterLine"
, }
, series: [{
name: "Path1"
, data: stats,
width:5
, markers: {
visible: false
, color: 'red'
}
}, {
name: "Path2"
, data: stats2
, width:5
, markers: {
visible: false
}
}
, {
name: "Path3"
, data: stats2
, width:5,
color: 'blue'
, markers: {
visible: false
}
}
],
});
}
var stats = [
{
x: 0
, y: 200
}
, {
x: 1.69873026677616
, y: 399.992440081194
}
, {
x: 3.00217915242074
, y: 599.98799853571
}
, {
x: 3.85446249323765
, y: 799.986136830373
}
, {
x: 5.4658456244775
, y: 999.977901038699
}
, {
x: 3.26067838482256
, y: 1494.94787950881
}
, {
x: -4.07983548814565
, y: 1934.87946942842
}
, {
x: -11.028398407264
, y: 2410.82358594718
}
, {
x: -21.9927517170883
, y: 2888.68253663905
}
, {
x: -27.0849827521949
, y:...