Applying Rounded Corners to BarSeries in .NET MAUI Chart
Environment
Product | Version | Author |
---|---|---|
Chart for .NET MAUI | 7.1.0 | Dobrinka Yordanova |
Description
When implementing a RadCartesianChart
with BarSeries
in a .NET MAUI application, you might want to customize the appearance of the bar series to have rounded corners. This customization is not available directly through the Chart's API and requires accessing the native Chart elements on Android and iOS to apply the desired styling.
This KB article also answers the following questions:
- How can I customize the appearance of the BarSeries in the .NET MAUI Chart?
- Is it possible to apply rounded corners to bars in a .NET MAUI Chart?
- Can I access native Chart properties for customization in .NET MAUI?
Solution
To apply rounded corners to BarSeries
in a RadCartesianChart
for .NET MAUI, follow these steps:
1. Define the Chart in XAML and subscribe to the HandlerChanged
event:
<telerik:RadCartesianChart x:Name="chart"
HandlerChanged="chart_HandlerChanged">
<telerik:RadCartesianChart.BindingContext>
<local:CategoricalDataViewModel />
</telerik:RadCartesianChart.BindingContext>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis LabelFitMode="MultiLine" />
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:NumericalAxis LabelFitMode="MultiLine" />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries ValueBinding="Value"
CategoryBinding="Category"
ItemsSource="{Binding Data}" />
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
2. Implement the ViewModel
and sample data model as per your data requirements:
public class CategoricalData
{
public object Category { get; set; }
public double Value { get; set; }
}
public class CategoricalDataViewModel
{
public ObservableCollection<CategoricalData> Data { get; set; }
public CategoricalDataViewModel()
{
this.Data = new ObservableCollection<CategoricalData>
{
new CategoricalData { Category = "A", Value = 101 },
new CategoricalData { Category = "B", Value = 45 },
new CategoricalData { Category = "C", Value = 77 },
new CategoricalData { Category = "D", Value = 15 },
new CategoricalData { Category = "E", Value = 56 },
};
}
}
3. Implement the HandlerChanged
event handler to customize the bar series on each platform.
private void chart_HandlerChanged(object sender, EventArgs e)
{
this.UpdateChart();
}
private void UpdateChart()
{
var platformView = this.chart.Handler.PlatformView;
#if ANDROID
var platformChart = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.RadCartesianChartView)platformView;
var platformSeries = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.BarSeries)platformChart.Series.Get(0);
platformSeries.AreBarsRounded = true;
platformSeries.RoundBarsRadius = 10;
#elif IOS
var platformiOSChart = (Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.TKExtendedChart)platformView;
var platformSeries = (TelerikUI.TKChartBarSeries)platformiOSChart.Series[0];
platformSeries.Style.Palette = new TelerikUI.TKChartPalette();
var paletteItem = new TelerikUI.TKChartPaletteItem();
paletteItem.Fill = new TelerikUI.TKSolidFill(UIKit.UIColor.Red, 5.0f);
paletteItem.Stroke = new TelerikUI.TKStroke(UIKit.UIColor.Black);
platformSeries.Style.Palette.AddPaletteItem(paletteItem);
#endif
}
Notes
- The customization process involves platform-specific code, which requires conditional compilation directives (
#if ANDROID
and#if IOS
) to apply the correct styling for each platform.