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?
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
0
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:
C#:
You can also find the full VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
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>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.