javascriptc#telerikkendo-chartkendo-ui-mvc

Why is it not possible to group Telerik chart legend items?


I would need to group the elements of a Kendochart series, so they are separated as follows:

Group Title 1:
Serie 1.
Serie 2.
Group Title 2:
Serie 3.
Serie 4.

I tried it with a template, but it does not work.

legend: {
    labels: {
        template: kendo.template($("legend-template").html())
    }
}, 

<script id="legend-template" type="text/x-kendo-template">
    <div id="Leyenda">  #: text # </div>
</script>

Thank you in advance.


Solution

  • SOLVED: The solution was to create a new div with a checkbox for each of the series and through jQuery to play with the checked property of these, alternating the visualization of each elements of the series.

    For Example:

     $("#SerieName").change(function () {
                if ($("#SerieName").is(":checked")) {
                    $("#Chart").data("kendoChart").options.series[0].visible = true;
                    $("#Chart").data("kendoChart").redraw();
    
                } else {
    
                    $("#Chart").data("kendoChart").options.series[0].visible = false;
                    $("#Chart").data("kendoChart").redraw();
                }
            });