JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<div id="chart"></div>
<button onclick="btnClick()">Change data</button>
JavaScript
var seriesData = [{
"Date": "12/31/2007",
"IndexValue": 190.68435691915832,
},
{
"Date": "1/1/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/2/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/3/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/4/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/5/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/6/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/7/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/8/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/9/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/10/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/11/2008",
"IndexValue": 190.67087650872867,
},
{
"Date": "1/12/2008",
"IndexValue": 190.67087650872867}
];
$(document).ready(function() {
$("#chart").kendoChart({
theme: "default",
title: {
text: "Kendo Chart Example"
},
dataSource: {
data: seriesData
},
seriesDefaults: {
type: "line",
markers: {
visible: false
},
line: {
width: 5
}
},
series: [{
name: "IndexValue",
field: "IndexValue"}],
categoryAxis: {
field: "Date",
baseUnit: "week"
},
legend: {
position: "top"
},
tooltip: {
visible: true,
format: "{0}%"
}
});
});
function btnClick() {
var chart = $("#chart").data("kendoChart");
seriesData = [{
"Date": "12/31/2007",
"IndexValue": 7000,
},
{
"Date": "1/1/2008",
"IndexValue": 213,
},
{
"Date": "1/2/2008",
...