Skip to content

Added new kb article chart-ios-y-axis-label-line-visibility #1189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added new kb article chart-ios-y-axis-label-line-visibility #1189

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions knowledge-base/chart-ios-y-axis-label-line-visibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: Achieving Consistent Chart Rendering Across Android and iOS
description: Learn how to achieve consistent rendering for CartesianChart in .NET MAUI between Android and iOS, including fixing Y-axis line visibility and label alignment.
type: how-to
page_title: Fixing Y-Axis Line and Label Alignment in Chart for iOS
meta_title: Fixing Y-Axis Line and Label Alignment in Chart for iOS
slug: chart-ios-y-axis-label-line-visibility
tags: chart,.net maui,radcartesianchart,axis,handler
res_type: kb
---

## Environment

| Version | Product | Author |
| --- | --- | ---- |
| 11.0.0 | Telerik UI for .NET MAUI Chart | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |

## Description

I want to achieve consistent rendering for the [Chart](https://docs.telerik.com/devtools/maui/controls/chart/types/cartesian-chart) in .NET MAUI across Android and iOS. On iOS, the Y-axis line is not visible, and the axis labels are inside the chart renderer and right-aligned instead of left-aligned as on Android.

This knowledge base article also answers the following questions:
- How to make Y-axis line visible in `RadCartesianChart` for iOS?
- How to align Y-axis labels to the left in `RadCartesianChart` for iOS?
- How to customize `RadCartesianChart` rendering for iOS in .NET MAUI?

## Solution

Access the native iOS chart control via the handler to customize the Y-axis line visibility and label alignment.

1. Subscribe to the `HandlerChanged` event of `RadCartesianChart`.
2. Access the native iOS control in the event handler.
3. Modify the Y-axis properties to make the line visible and align the labels to the left.

```csharp
<telerik:RadCartesianChart x:Name="chart" />

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new SeriesCategoricalViewModel();

this.chart.HandlerChanged += this.Chart_HandlerChanged;
}

private void Chart_HandlerChanged(object sender, EventArgs e)
{
this.UpdateChart();
}

private void UpdateChart()
{
var platformView = this.chart.Handler.PlatformView;
#if IOS || MACCATALYST
var platformChart = (Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.TKExtendedChart)platformView;
platformChart.YAxis.Style.LineHidden = false;
platformChart.YAxis.Style.LabelStyle.TextAlignment = TelerikUI.TKChartAxisLabelAlignment.Left;
platformChart.YAxis.Style.LabelStyle.FirstLabelTextAlignment = TelerikUI.TKChartAxisLabelAlignment.Left;
#endif
}
}
```

## See Also

- [CartesianChart Overview](https://docs.telerik.com/devtools/maui/controls/chart/types/cartesian-chart)
- [Customizing Native Chart Controls in .NET MAUI](https://docs.telerik.com/devtools/maui/search?q=chart)