Legend Title

[David]

Is it anyway that display legend title or add legend title?

[Iliana Dyankova]

Hi David,

A legend title option is currently not supported by Kendo UI Chart. Actually this idea has been already submitted as a feature request at our UserVoice portal - you may cast a vote, leave a comment or monitor the community's interest in it here. The more votes the suggestion collects, the higher priority will have when planning for a release.

Regards,
Iliana Nikolova
Telerik

 

 

[David]

Thank you for letting me know.

[EZ]

Although it is not supported, you can insert text into the chart SVG with script.

DEMO

In the case of this demo, I am using D3.js for the svg manipulation, but you could do it with straight JavaScript or jQuery.

I have setup the legend options in the chart with a top padding to leave space for the title and a near transparent background that gives me a unique fill color to enable easy selection of the legend path/group.

legend: {
  visible: true,
  background: "rgba(0,0,0,0.0001)",
  position: "bottom",
  align: "center",
  padding: {
    top: 28
  }
}

The script to render the legend title goes in the chart's render event. I select the path with the fill color and get its parent group. The I figure out its size and position with getBBox(), finally I append a text element:

render: function(){
    var theLegend = $('#chart path[fill="rgba(0,0,0,0.0001)"]').closest("g");
    var svg = d3.select(theLegend[0]);
    var theRect = theLegend[0].getBBox();

    svg.append('text')
        .attr("class", "legendTitleText")
        .attr('x', theRect.x + theRect.width / 2)
        .attr('y', theRect.y)
        .attr("dy", "1em")
        .attr("text-anchor", "middle")
        .style("fill", "#555")
        .style("font", "14px Arial,Helvetica,sans-serif")
        .style("font-weight", "bold")
        .text("Legend Title");
}

[David]

Thanks for the help!!!!!

[Marin Bratanov]

Here is an example modified to work with the RadHtmlChart WebForms wrapper where the render event is not directly exposed.

I also added some rudimentary error handling via a try-catch block and added a check for IE which renders spaces in the fill attribute.

<telerik:RadHtmlChart runat="server" ID="rhc1">
    <ClientEvents OnLoad="OnLoad" />
    <PlotArea>
        <Series>
            <telerik:DonutSeries>
                <SeriesItems>
                    <telerik:PieSeriesItem Name="first" Y="1" />
                    <telerik:PieSeriesItem Name="second" Y="2" />
                    <telerik:PieSeriesItem Name="third" Y="3" />
                </SeriesItems>
            </telerik:DonutSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
    function OnLoad(sender) {
        var kChart = sender.get_kendoWidget();
        var opts = kChart.options;
        opts.render = renderHandler;//attach to the render event so you can modify the svg
        opts.legend.background = "rgba(0,0,0,0.0001)";//so the chart legend element can be distinguished
        kChart.setOptions(opts);
    }

    function renderHandler(args) {
        try {
            var theLegend = $telerik.$(args.sender.element).find('path[fill="rgba(0,0,0,0.0001)"]').closest("g");
            theLegend = theLegend.length > 0 ? theLegend : $telerik.$(args.sender.element).find('path[fill="rgba(0, 0, 0, 0.0001)"]').closest("g");//for IE

            var svg = d3.select(theLegend[0]);
            var theRect = theLegend[0].getBBox();
            console.log(theRect);

            svg.append('text')
                .attr("class", "legendTitleText")
                .attr('x', theRect.x + theRect.width / 2)
                .attr('y', theRect.y - 20)
                .attr("dy", "1em")
                .attr("text-anchor", "middle")
                .style("fill", "#555")
                .style("font", "14px Arial,Helvetica,sans-serif")
                .style("font-weight", "bold")
                .text("Legend Title");
        }
        catch (ex) { }
    }
</script>