Legend Title

6 posts, 1 answers
  1. David
    David avatar
    8 posts
    Member since:
    Jul 2015

    Posted 10 Aug 2015 Link to this post

    Is it anyway that display legend title or add legend title?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Aug 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. David
    David avatar
    8 posts
    Member since:
    Jul 2015

    Posted 12 Aug 2015 in reply to Iliana Nikolova Link to this post

    Thank you for letting me know.
  4. Answer
    EZ
    EZ avatar
    65 posts
    Member since:
    May 2015

    Posted 12 Aug 2015 Link to this post

    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");
    }

  5. David
    David avatar
    8 posts
    Member since:
    Jul 2015

    Posted 14 Aug 2015 in reply to EZ Link to this post

    Thanks for the help!!!!!
  6. Marin Bratanov
    Marin Bratanov avatar
    23 posts
    Member since:
    Jul 2012

    Posted 08 Nov 2017 in reply to EZ Link to this post

    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>
        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>
Back to Top