Legend Truncate Displayed Value?

2 posts, 0 answers
  1. Alexander
    Alexander avatar
    1 posts
    Member since:
    Jun 2013

    Posted 07 Aug 2013 Link to this post

    Hello,
    I have a Pie Chart whose slice names can be very long - so long that the legend ends up disproportionately large as compared to the actual pie. Is it possible to have the HtmlChart legend only display the first n characters in the category value and then display the full value in the htmlchart tooltip?
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 08 Aug 2013 Link to this post

    Hi Alexander,

    The values in the Legend comes from the Name property of each SeriesItem declared and you cannot cut them.

    If, however, your RadHtmlChart is bound to a datasource, then the ClientTemplate functionality can be used, so that the longer names can be set for the Tooltips through the ClientTemplates and the shorter ones for the legend can be set through the NameField property. Please find below and example that illustrates this:
    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Height="400px" Width="400px">
        <PlotArea>
            <Series>
                <telerik:PieSeries DataFieldY="myData" NameField="myLegendItems">
                    <TooltipsAppearance ClientTemplate="#=dataItem.myTooltips # <br/>#=dataItem.myTooltips #" />
                </telerik:PieSeries>
            </Series>
        </PlotArea>
        <Legend>
            <Appearance Visible="true"></Appearance>
        </Legend>
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Pass datasource to the first chart
            RadHtmlChart1.DataSource = GetData();
            RadHtmlChart1.DataBind();
        }
     
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("myData");
        dt.Columns.Add("myLegendItems");
        dt.Columns.Add("myTooltips");
     
        dt.Rows.Add(1, 100, "item 1", "this is longer tooltip1, this is longer tooltip1");
        dt.Rows.Add(2, 200, "item 2", "this is longer tooltip2, this is longer tooltip2");
        dt.Rows.Add(3, 350, "item 3", "this is longer tooltip3, this is longer tooltip3");
        dt.Rows.Add(4, 450, "item 4", "this is longer tooltip4, this is longer tooltip4");
     
        return dt;
    }

    You can also find the full VS example in the attached archive.


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top