Clickable legends on Kendo UI DataWiz charts.

24th April 2013

Kendo UI’s missing feature.

Strangely enough, whilst the Kendo UI charts have many great features they seem to be missing one quite useful option – clickable series labels on the legend area.

I’ve seen discussions on forums where Telerik agree this would be useful and could be added, but in the meantime you could try something like this, which works for my test charts.

How to add it in.

Add a dataBound handler at chart creation that calls a function, eg makeLegendClickable.

dataBound: function (e) {
    makeLegendClickable(this);
}

Add the function, as follows:

function makeLegendClickable(kendochart) {
    setTimeout(function (e) {
        var gs = $('#' + kendochart.element[0].id + ' svg g');
        if (gs.length > 1) {
            $('#' + kendochart.element[0].id + ' svg g:last text').each(function (e) {
                $(this)[0].setAttribute("onclick", "alert('" + $(this)[0].textContent + "');");
            });
        }
    }, 750);
}

This waits 750 milliseconds then finds the last ‘g’ element in the SVG DOM which, in my tests so far, is always the legend if one is there, then marks the text elements up with javascript onclick events.

The check for gs.length is just a catch-all and is probably pointless as many charts have multiple g elements even if they have no legend at all. In some cases however it does eliminate unnecessary work.