JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
 <div id="chart"></div>

JavaScript

var valueData = [{
    employeeName: "Joe Smith",
    date: "10/03/2012",
    value: 2000},
{
    employeeName: "Jane Smith",
    date: "10/02/2012",
    value: 2250},
{
    employeeName: "Will Roberts",
    date: "10/01/2012",
    value: 1550}]

$(document).ready(function() {
    $("#chart").kendoChart({
        title: {
            text: "Employee value"
        },
        dataSource: {
            data: valueData
        },
        seriesDefaults: {
            type: "line",
            labels: {
                visible: true,
                template: "#= dataItem.employeeName #"
            }
        },
        series: [{
            //type: "line",
            field: "value",
            name: "value in Units"}],
        categoryAxis: {
            field: "date",
        },
        tooltip: {
            visible: true,
            format: "{0}",
            template: "#= dataItem.value #"

        }
    });
});