Question About Changing Axis Line Color in SfCartesianChart
Hi Jon Kao,
As a workaround, we recommend using data binding with a ViewModel. This involves binding a color property in your ViewModel to the axis line style in XAML and updating this property in your event handler—ensuring dynamic updates in the UI.
Here is a simple code snippet:
XAML:
<chart:SfCartesianChart.XAxes> <chart:CategoryAxis> <chart:CategoryAxis.AxisLineStyle> <chart:ChartLineStyle StrokeWidth="2" Stroke="{Binding AxisColor}"/> </chart:CategoryAxis.AxisLineStyle>
<chart:CategoryAxis.LabelStyle> <chart:ChartAxisLabelStyle TextColor="{Binding AxisColor}" FontSize="12"/> </chart:CategoryAxis.LabelStyle> </chart:CategoryAxis> </chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes> <chart:NumericalAxis> <chart:NumericalAxis.AxisLineStyle> <chart:ChartLineStyle StrokeWidth="2" Stroke="{Binding AxisColor}"/> </chart:NumericalAxis.AxisLineStyle> </chart:NumericalAxis> </chart:SfCartesianChart.YAxes> |
ViewModel:
public class ViewModel : INotifyPropertyChanged { private Color? _axisColor;
public Color? AxisColor { get => _axisColor; set { if (_axisColor != value) { _axisColor = value; OnPropertyChanged(); } } }
public ViewModel() { AxisColor = Colors.Blue; }
public event PropertyChangedEventHandler? PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } |
Button click code snippet:
private void Button_Clicked(object sender, EventArgs e) { viewModel.AxisColor = viewModel.AxisColor == Colors.Red ? Colors.Blue : Colors.Red; } |
We have attached the sample for your reference; you can review the sample for more information.
Please reach out if you need further assistance.
Best regards,
Arul Jenith B.
Attachment: AxisLineTest_9d574e3e.zip
