This is a migrated thread and some comments may be shown as answers.
Legend Truncate Displayed Value?
1 Answer 12 Views
This is a migrated thread and some comments may be shown as answers.
Alexander
Top achievements
Rank 1
Alexander asked on 07 Aug 2013, 07:03 PM
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?

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 08 Aug 2013, 04:07 PM
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.
Asked by
Alexander
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or