Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Rohit Arora
35
Text on the top of bars is overlapping with other bars in column chart
posted

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);
}

Parents
No Data
Reply
  • 1080
    Verified Answer
    Offline posted

    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

Children