Columnchart CategoryAxis labels visibility

[AlleSchonWeg]

Hi,
how can I make all labels on the X-axis visible? As you see in the screenshot only every second label is visible.

XAML:

<chart:CategoryAxis LabelRotation="90">
</chart:CategoryAxis>

Thank you.

[VimalaThirumalaikumar]

Hi @AlleSchonWeg,

In chart axes, intervals are calculated using a "nice interval" method based on the available size and axis range to prevent label overlap. Since the axis range isn’t explicitly set, it’s auto-calculated, which may result in some labels being skipped—especially on smaller screens. However, based on your screenshot, there seems to be enough space to display all labels.

We attempted to reproduce the issue using the same configuration, but all labels were rendered correctly in our test. Please see the output below for reference.

We suspect this behavior may be device specific. Could you please share the Android device model you are using?

Regards,
Vimala.

[AlleSchonWeg]

Hi,
on a Pixel 5 API 35. Hmm, crazy.
I have the chart in a custom control (ContentView) and not directly in a page. Perhaps this could be the reason. And this custom control is in a AbsoluteLayout. I have views which are drawn over the chart. You can see it in the screenshot.

Regards

[AlleSchonWeg]

Hi @VimalaThirumalaiKumarSF3739 ,
i was able to create a repro. The problem occurs when the chart is inside a AbsoluteLayout width Padding or Margin:
XAML:

<AbsoluteLayout BackgroundColor="Orange"
				Padding="10">
	<chart:SfCartesianChart x:Name="chart"
							BackgroundColor="LightCyan"
							AbsoluteLayout.LayoutFlags="SizeProportional"
							AbsoluteLayout.LayoutBounds="0,0,1,1">
		<chart:SfCartesianChart.Resources>
			<DoubleCollection x:Key="dashArray">
				<x:Double>3</x:Double>
				<x:Double>3</x:Double>
			</DoubleCollection>
		</chart:SfCartesianChart.Resources>
		<chart:SfCartesianChart.TooltipBehavior>
			<chart:ChartTooltipBehavior Background="LightBlue"
										Duration="5" />
		</chart:SfCartesianChart.TooltipBehavior>
		<chart:SfCartesianChart.Legend>
			<chart:ChartLegend Placement="Top">
				<chart:ChartLegend.LabelStyle>
					<chart:ChartLegendLabelStyle Margin="0"
												 FontFamily="sans-serif"
												 FontSize="12"
												 TextColor="{AppThemeBinding Light=Black, Dark=White}" />
				</chart:ChartLegend.LabelStyle>
			</chart:ChartLegend>
		</chart:SfCartesianChart.Legend>
		<chart:SfCartesianChart.XAxes>
			<chart:CategoryAxis LabelRotation="90"
								LabelsIntersectAction="MultipleRows"
								EdgeLabelsDrawingMode="Shift">
				<chart:CategoryAxis.MajorGridLineStyle>
					<chart:ChartLineStyle StrokeDashArray="{StaticResource dashArray}"
										  Stroke="{AppThemeBinding Light=Black, Dark=White}"
										  StrokeWidth="1" />
				</chart:CategoryAxis.MajorGridLineStyle>
				<chart:CategoryAxis.AxisLineStyle>
					<chart:ChartLineStyle StrokeWidth="0" />
				</chart:CategoryAxis.AxisLineStyle>
				<chart:CategoryAxis.MajorTickStyle>
					<chart:ChartAxisTickStyle TickSize="4" />
				</chart:CategoryAxis.MajorTickStyle>
				<chart:CategoryAxis.LabelStyle>
					<chart:ChartAxisLabelStyle TextColor="{AppThemeBinding Light=Black, Dark=White}"
											   FontFamily="sans-serif-medium"
											   FontSize="12" />
				</chart:CategoryAxis.LabelStyle>
			</chart:CategoryAxis>
		</chart:SfCartesianChart.XAxes>
		<chart:SfCartesianChart.YAxes>
			<chart:NumericalAxis EdgeLabelsDrawingMode="Hide"
								 EdgeLabelsVisibilityMode="Visible">
				<chart:NumericalAxis.MajorGridLineStyle>
					<chart:ChartLineStyle StrokeDashArray="{StaticResource dashArray}"
										  Stroke="{AppThemeBinding Light=Black, Dark=White}"
										  StrokeWidth="1" />
				</chart:NumericalAxis.MajorGridLineStyle>
				<chart:NumericalAxis.AxisLineStyle>
					<chart:ChartLineStyle StrokeWidth="1"
										  Stroke="{AppThemeBinding Light=Black, Dark=White}" />
				</chart:NumericalAxis.AxisLineStyle>
				<chart:NumericalAxis.MajorTickStyle>
					<chart:ChartAxisTickStyle TickSize="4" />
				</chart:NumericalAxis.MajorTickStyle>
				<chart:NumericalAxis.LabelStyle>
					<chart:ChartAxisLabelStyle TextColor="{AppThemeBinding Light=Black, Dark=White}"
											   FontFamily="sans-serif-medium"
											   FontSize="12" />
				</chart:NumericalAxis.LabelStyle>
			</chart:NumericalAxis>
		</chart:SfCartesianChart.YAxes>
		<chart:SfCartesianChart.Annotations>
			<chart:HorizontalLineAnnotation Y1="0" />
		</chart:SfCartesianChart.Annotations>
		<chart:SfCartesianChart.Series>
			<chart:ColumnSeries Label="Countries"
								EnableAnimation="True"
								Spacing="0.1"
								Width="0.2"
								CornerRadius="5,5,0,0"
								x:Name="columnSeries1"
								ItemsSource="{Binding ColumnData1}"
								XBindingPath="Name"
								YBindingPath="Value">
				<chart:ColumnSeries.DataLabelSettings>
					<chart:CartesianDataLabelSettings>
						<chart:CartesianDataLabelSettings.LabelStyle>
							<chart:ChartDataLabelStyle FontSize="12"
													   LabelFormat='0.00' />
						</chart:CartesianDataLabelSettings.LabelStyle>
					</chart:CartesianDataLabelSettings>
				</chart:ColumnSeries.DataLabelSettings>
			</chart:ColumnSeries>
		</chart:SfCartesianChart.Series>
	</chart:SfCartesianChart>
</AbsoluteLayout>

Code behind:

	public partial class MyPage: ContentPage {
		public MyPage() {
			InitializeComponent();
			BindingContext = new MyViewModel();
		}
	}

ViewModel:

	public class MyViewModel: INotifyPropertyChanged {
		public MyViewModel() {
			ColumnData1 = new List<ChartDataModel> {
				new ChartDataModel("AAAA-XXXX", -268),
				new ChartDataModel("DDDDD", -164),
				new ChartDataModel("EEEEE", -5),
				new ChartDataModel("QWE", -1),
				new ChartDataModel("OKZ", 0),
				new ChartDataModel("BAHEZEEDd", 17),
				new ChartDataModel("Hansd", 31),
				new ChartDataModel("Sannand", 36),
				new ChartDataModel("Ausnss", 78),
				new ChartDataModel("ANzehd", 132),
				new ChartDataModel("AMmsdundjen", 151),
			};
			OnPropertyChanged(nameof(ColumnData1));
		}

		public List<ChartDataModel> ColumnData1 {
			set;
			get;
		}

		public void OnPropertyChanged(string name) {
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
		}
		public event PropertyChangedEventHandler? PropertyChanged;
	}

	public class ChartDataModel {

		public ChartDataModel(string n, double v) {
			Name = n;
			Value = v;
		}

		public string Name { get; set; }
		public double Value { get; set; }
	}

Result:

[AlleSchonWeg]

Hi @PaulAndersonS ,

i posted this under discussion. Could you transfer this to issues? I think it is a bug.

Thank you

[PaulAndersonS]

Hi @AlleSchonWeg Sure. Please followup here #241