<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo Chart Curved Edge Label</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
transitions: false,
dataSource: {
data: [
{value: 98},
{value: 10},
{value: 28},
{value: 35},
{value: 64}
],
},
categoryAxis: {
categories: [
"Category A",
"Category B",
"Category C",
"Category D",
"Category E"
],
},
series: [{
type: "line",
field: "value",
color: "#3e90ce77",
labels : {
visible: true,
visual: function(e) {
let visual = e.createVisual();
let geom = kendo.geometry;
let draw = kendo.drawing;
let group = new draw.Group();
let rect = visual.bbox();
let origin = rect.getOrigin();
let size = rect.getSize();
if (e.value > 50) {
let rectGeom = new geom.Rect(origin, size);
let rectangle = new draw.Rect(rectGeom, {
fill: {
color: "red",
},
});
let text = new draw.Text(e.value,
[origin.getX() + 3, origin.getY() + 3], {
fill: {
color: "white",
},
});
group.append(rectangle);
group.append(text);
return group;
}
if (e.value === 10) {
let path = new draw.Path({
fill: {
color: "orange",
},
});
path.moveTo(origin)
.curveTo(
[origin.getX(), origin.getY()],
[origin.getX(), origin.getY() - 2],
[origin.getX() + 2, origin.getY() - 2]
)
.lineTo(origin.getX() + size.getWidth() + 2, origin.getY() - 2)
.curveTo(
[origin.getX() + size.getWidth() + 2, origin.getY() - 2],
[origin.getX() + size.getWidth() + 4, origin.getY() - 2],
[origin.getX() + size.getWidth() + 4, origin.getY()]
)
.lineTo(origin.getX() + size.getWidth() + 4, origin.getY() + size.getHeight())
.curveTo(
[origin.getX() + size.getWidth() + 4, origin.getY() + size.getHeight()],
[origin.getX() + size.getWidth() + 4, origin.getY() + size.getHeight() + 2],
[origin.getX() + size.getWidth() + 2, origin.getY() + size.getHeight() + 2]
)
.lineTo(origin.getX() + 2, origin.getY() + size.getHeight() + 2)
.curveTo(
[origin.getX() + 2, origin.getY() + size.getHeight() + 2],
[origin.getX(), origin.getY() + size.getHeight() + 2],
[origin.getX(), origin.getY() + size.getHeight()]
)
.close();
let text = new draw.Text(e.value,
[origin.getX() + 3, origin.getY() + 3], {
fill: {
color: "white",
},
});
group.append(path);
group.append(text);
return group;
}
let text = new draw.Text(e.value, origin, {
fill: {
color: "green",
},
cursor: "pointer",
});
group.append(text);
return group;
}
},
}],
});
</script>
</body>
</html>