Increase the Stroke Size in the Chart Legend
Environment
Product | Kendo UI® | Progress® Kendo UI® Chart for jQuery |
Product Version | Created with the 2017.3.1026 version |
Description
How can I change the size of the stroke next to the legend text in the Kendo UI Chart?
Solution
- Handle the
render
event of the Chart. - In the
render
event handler, select the desiredpath
with jQuery. - Change the
stroke-width
attribute of thepath
.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
font: "60px sans-serif"
}
},
series: [{
name: "Series 1",
data: [1, 2, 3]
},
{
name: "Series 2",
data: [3, 4, 5]
}
],
render: function(e) {
var el = e.sender.element;
el.find("text:contains(Series 1)")
.parent()
.prev("path")
.attr("stroke-width", 5);
el.find("text:contains(Series 2)")
.parent()
.prev("path")
.attr("stroke-width", 5);
}
});
</script>