I have a bar chart that has a single series of labels that come from a data source. Some of the labels are too long, and I am trying to wrap the text, as shown in this demo:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/multiline-labels
I was able to get the demo to work by just inserting the markup, but when I try to make text wrap in my own code, I get a javascript error. (Unterminated string constant)
I have simplified my code to give an example of what is happening. Here is the markup:
<telerik:RadHtmlChart ID="barChart" Transitions="true" Skin="Silk" Height="500" runat="server"> <ChartTitle> <Appearance> <TextStyle Bold="true" FontSize="14" /> </Appearance> </ChartTitle> <Legend> <Appearance Position="Bottom" Visible="false"></Appearance> </Legend> <PlotArea> <XAxis> <TitleAppearance> <TextStyle Bold="true" FontSize="12" /> </TitleAppearance> <LabelsAppearance Visible="true"> <TextStyle Bold="true" FontSize="10" /> </LabelsAppearance> <MajorGridLines Visible="false" /> <MinorGridLines Visible="false" /> </XAxis> <YAxis MajorTickType="None"> <TitleAppearance> <TextStyle Bold="true" FontSize="12" /> </TitleAppearance> <LabelsAppearance> <TextStyle Bold="true" FontSize="10" /> </LabelsAppearance> <MajorGridLines Visible="true" /> <MinorGridLines Visible="false" /> </YAxis> </PlotArea></telerik:RadHtmlChart>Here is the relevant code on the server. I have seen posts from 2013 that said this is not possible, but the 2014 demo implies that you have resolved he issue:
public void CreateChart(ChartEventArgs args){ barChart.PlotArea.Series.Clear(); //var ds = _presenter.GenerateChart(args); barChart.PlotArea.XAxis.Name = "Workflow Step"; barChart.PlotArea.XAxis.DataLabelsField = "WorkflowStep"; AddChartSeries("WorkflowStep", "AvgDaysToCSR", "{0:N2}", Color.FromArgb(245, 234, 105)); var average = new List<ChartRequestTypeResult>(); // Works, but doesn't wrap //average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = "Test Wrap One", AvgDaysToCSR = 1.0 }); //average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = "Test Wrap Two", AvgDaysToCSR = 2.0 }); //average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = "Test Wrap Three", AvgDaysToCSR = 3.0 }); // Gives error average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = "Test\nWrap\nOne", AvgDaysToCSR = 1.0 }); average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = "Test\nWrap\nTwo", AvgDaysToCSR = 2.0 }); average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = "Test\nWrap\nThree", AvgDaysToCSR = 3.0 }); barChart.DataSource = average; barChart.DataBind(); BackgroundColor = Color.FromArgb(208, 212, 204);}public void AddChartSeries(string name, string seriesValue, string format, Color color){ ColumnSeries cs = new ColumnSeries(); cs.Name = name; cs.Stacked = false; cs.Spacing = 0.0; cs.Gap = 0.2; cs.DataFieldY = seriesValue; cs.Appearance.Overlay.Gradient = Gradients.Glass; cs.Appearance.FillStyle.BackgroundColor = color; cs.LabelsAppearance.DataFormatString = format; cs.TooltipsAppearance.DataFormatString = format; if ((color.R * 2) + (color.G * 3) + color.B < 600) cs.TooltipsAppearance.Color = Color.FromKnownColor(KnownColor.White); barChart.PlotArea.Series.Add(cs);}2 Answers, 1 is accepted
0
Accepted
Hi Johnathan,
The face problem is related to the unescaped backslashes in the multiline labels. Adding a simple "@" sign in front of the string will allow you to render them successfully:
Kind regards,
Vessy
Progress Telerik
The face problem is related to the unescaped backslashes in the multiline labels. Adding a simple "@" sign in front of the string will allow you to render them successfully:
average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = @"Test\nWrap\nOne", AvgDaysToCSR = 1.0 });average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = @"Test\nWrap\nTwo", AvgDaysToCSR = 2.0 });average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = @"Test\nWrap\nThree", AvgDaysToCSR = 3.0 });Kind regards,
Vessy
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Johnathan
Top achievements
Rank 1
Rank 1
answered on 22 Jun 2017, 05:40 PM
Thank you, problem is fixed.