New to Kendo UI for jQueryStart a free 30-day trial

Increase the Stroke Size in the Chart Legend

Environment

Product Kendo UI®Progress® Kendo UI® Chart for jQuery
Product VersionCreated 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

  1. Handle the render event of the Chart.
  2. In the render event handler, select the desired path with jQuery.
  3. Change the stroke-width attribute of the path.
<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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support