Hi,I am using Column Chart and using ChartTextAppearance class to display text on the top each bar. But that text is overlapping with other bar in column chart.
So, do we have any property available, by using which we can rotate the text. I was thinking to change its orientation to BottomToTop, but didn't find anything relevant property to do this.
This is my code:
if (chartType.Equals(ChartType.ColumnChart)) { ChartTextAppearance chartText = new ChartTextAppearance(); chartText.ItemFormatString = isAmt ? "<DATA_VALUE:C>" : "<DATA_VALUE>"; chartText.Visible = true; chartText.Row = -2; chartText.Column = -2; chartText.ClipText = true; chartText.ChartTextFont = new Font("Arial", 9, FontStyle.Bold); chartText.VerticalAlign = StringAlignment.Far; chartText.HorizontalAlign = StringAlignment.Center; ultraChart.ColumnChart.NullHandling = NullHandling.DontPlot; ultraChart.ColumnChart.ChartText.Add(chartText); }
Hello Rohit,
Thank you for posting in our community.
The WebChart does not provide this functionality out of the box. This means that these labels should be manually added. I suggest using FillSceneGraph event for achieving this. For example:
protected void ultraChart_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e) { IAdvanceAxis yAxis = e.Grid["Y"] as IAdvanceAxis; IAdvanceAxis xAxis = e.Grid["X"] as IAdvanceAxis; IChartData chartData = e.ChartCore.GetCurrentDataRef(); int rowCount = chartData.GetRowCount(); int columnCount = chartData.GetColumnCount(); var offset = 0.0; for (int i = 0; i < rowCount; i++) { var seriesOffset = offset; for (int j = 0; j < columnCount; j++) { Text label = new Text(); var value = chartData.GetValue(i, j); Point location = new Point((int)xAxis.Map(seriesOffset + j + 0.5), (int)yAxis.Map(value)); SizeF labelSize = Platform.GetStringSizePixels(value.ToString(), label.labelStyle.Font); location.X -= (int)labelSize.Height / 2; location.Y -= (int)labelSize.Width + 30; label.labelStyle.Orientation = TextOrientation.Custom; label.labelStyle.RotationAngle = 90; FontFamily fontFamily = new FontFamily("Arial"); Font font = new Font(fontFamily, 9, FontStyle.Bold); label.labelStyle.Font = font; label.SetTextString("$ " + value.ToString()); label.bounds = new Rectangle(location, new Size((int)labelSize.Height, (int)labelSize.Height + 35)); e.SceneGraph.Add(label); offset += 1.0; } offset += 1.0; } }
I’ve attached a sample for your reference. Let me know if that solves your issue.
3122.Sample.zip
Thank you so much. It almost resolved my issue.The only issue I am facing when the amount gets bigger, then it is hiding some portion:
When the Amount value is greater:
If you check the third bar's tooltip and value on the top of bar, there you will see the difference in values. I tried changing the height of rectangle, but it is impacting the positioning of text (on the top of each bar).Amount value can be anything greater than 0. So, I want things to behave in same manner.
Thanks,
Rohit
I have reproduced your issue and after taking a second look at the code I have provided, I noticed that when the label size is computed it uses the value before it is formatted and the default font of the Text class. Moving the definition of the font and the formatted value before the label size is defined resolves the issue:
//.... Text label = new Text(); var value = chartData.GetValue(i, j); var formattedValue = "$ " + value.ToString(); label.SetTextString(formattedValue); FontFamily fontFamily = new FontFamily("Arial"); Font font = new Font(fontFamily, 9, FontStyle.Bold); label.labelStyle.Font = font; Point location = new Point((int)xAxis.Map(seriesOffset + j + 0.5), (int)yAxis.Map(value)); SizeF labelSize = Platform.GetStringSizePixels(formattedValue, label.labelStyle.Font); location.X -= (int)labelSize.Height / 2 - 1; location.Y -= (int)labelSize.Width + 10; label.labelStyle.Orientation = TextOrientation.Custom; label.labelStyle.RotationAngle = 90; label.bounds = new Rectangle(location, new Size((int)labelSize.Height, (int)labelSize.Width)); e.SceneGraph.Add(label); offset += 1.0; //....
Hi Martin,
Thank you for new code.
First code you shared, there you have added static value 35 in height.
label.bounds = new Rectangle(location, new Size((int)labelSize.Height, (int)labelSize.Height + 35));
But we should be using labelSize.Width, which you have corrected in second example.
Thank you so much. It resolved my issue.
Regards,
Hi Rohit,
I am glad that you have resolved your issue.
Thank you for using Infragistics components.