Hello,
I have a radHTML5 column chart which can have quite long labels on the Y axis which causes the chart to be compressed and it looks poor.
Is it possible to wrap these labels, or limit the characters that are displayed, or even truncate them and show a tooltip with the full label on mouse over?
Any suggestions would be welcome
I have a radHTML5 column chart which can have quite long labels on the Y axis which causes the chart to be compressed and it looks poor.
Is it possible to wrap these labels, or limit the characters that are displayed, or even truncate them and show a tooltip with the full label on mouse over?
Any suggestions would be welcome
1 Answer, 1 is accepted
0
Hello Adrian,
I am sorry to say that line breaks are not currently supported in RadHtmlChart. The control renders as SVG and its labels are rendered inside SVG's text elements. The limitation stems from the fact that line breaks and word wrapping are not supported in SVG's text elements. This issue is logged in our feedback portal here and you can monitor, comment and vote on it. Our developers have an idea on ways around handling that limitation (e.g. use a special symbol to mark the end of the line and draw another text element), however, currently I cannot provide any ETA when it will be done, because tasks for this Q have already been planned.
The exception, however, is the tooltips which render as pure HTML, so that you can insert, for example a 'br' tag between the text.
As for the truncation of the labels - you can use JavaScript inside templates, so that if the text in the tooltips/labels are longer then 'n', truncate it. For example:
ASPX:
C#:
You may also find useful Using ClientTemplates to Display HTML and Execute JavaScript help article.
Regards,
Danail Vasilev
Telerik
I am sorry to say that line breaks are not currently supported in RadHtmlChart. The control renders as SVG and its labels are rendered inside SVG's text elements. The limitation stems from the fact that line breaks and word wrapping are not supported in SVG's text elements. This issue is logged in our feedback portal here and you can monitor, comment and vote on it. Our developers have an idea on ways around handling that limitation (e.g. use a special symbol to mark the end of the line and draw another text element), however, currently I cannot provide any ETA when it will be done, because tasks for this Q have already been planned.
The exception, however, is the tooltips which render as pure HTML, so that you can insert, for example a 'br' tag between the text.
As for the truncation of the labels - you can use JavaScript inside templates, so that if the text in the tooltips/labels are longer then 'n', truncate it. For example:
ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="myDataColumn"> <LabelsAppearance> <ClientTemplate>#if (dataItem.myLabelsColumn.length > 12) {# #=dataItem.myLabelsColumn.substr(0,11)# #} else {# #=dataItem.myLabelsColumn# #} # </ClientTemplate> </LabelsAppearance> <TooltipsAppearance> <ClientTemplate>#if (dataItem.myLabelsColumn.length > 12) {# #=dataItem.myLabelsColumn.substr(0,11)# #} else {# #=dataItem.myLabelsColumn# #} # </ClientTemplate> </TooltipsAppearance> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>C#:
protected void Page_Load(object sender, EventArgs e){ if (!IsPostBack) { RadHtmlChart1.DataSource = GetData(); RadHtmlChart1.DataBind(); }}protected DataTable GetData(){ DataTable tbl = new DataTable(); tbl.Columns.Add(new DataColumn("myDataColumn")); tbl.Columns.Add(new DataColumn("myLabelsColumn")); tbl.Rows.Add(new object[] { 1, "long text 1 long text 2 long text 3" }); tbl.Rows.Add(new object[] { 2, "text 1" }); tbl.Rows.Add(new object[] { 3, "long text 1 long text 2 long text 3" }); return tbl;}You may also find useful Using ClientTemplates to Display HTML and Execute JavaScript help article.
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.