JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
</div>
CSS
.k-chart-tooltip
{
padding: 0px;
}
JavaScript
function createChart() {
$("#chart").kendoChart({
title: {
text: "Title"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",
style: "smooth"
},
series: [{
name: "Series1",
color: "red",
data: [50, 100]
},{
name: "Series2",
color: "blue",
data: [null, 100, 150]
}],
valueAxis: {
labels: {
format: "{0:c}"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
categories: [2002, 2003, 2004],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "<div style='padding: 6px; border-radius: 4px;background: #= value == 100 ? \"red\" : series.color#'>#= series.name #: #= value #</div>",
background: "none",
border: {
width: 0
}
}
});
}
$(document).ready(createChart);