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>
CSS
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
JavaScript
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: -1577.81281571677
, y: 6280.30100457005
}
, {
x: -1670.46309907396
, y: 6279.00249774625
}
, {
x: -1762.23466391018
, y: 6279.48420727468
}
, {
x: -1854.97965946989
, y: 6280.62037393156
}
, {
x: -1947.69489889493
, y: 6282.81143178175
}
, {
x: -2039.40113758871
, y: 6284.97892767048
}
, {
x: -2132.06370238649
, y: 6285.95280581656
}
, {
x: -2224.64688294807
, y: 6285.95280581656
}
, {
x: -2307.25309840011
, y: 6286.31495933804
}
, {
x: -2361.9907672859
, y: 6286.79491879045
},
];
function createChart() {
$("#chart")
.kendoChart({
xAxis: {
min: -5000
, axisCrossingValue: [-5000, 0],
labels: {
// template: "#= shortLabels(value) #"
},
}
, yAxis: {
reverse: true
, labels: {
format: "{0}"
}
}
, seriesDefaults: {
type: "scatterLine"
, }
, series: [{
name: "Path1"
, data: stats
}],
});
}
function shortLabels(value) {
var strValue = kendo.toString(value)
strValue = strValue + "";
strValue = strValue.substring(1)
return strValue;
}
$(document)
.ready(createChart);