We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

On UWP the grid and category label text is in white not black like iOS or Android

Is there a way to set the legend color for the category labels and also the grid displayed behind the chart?

I have set the background to black on UWP to show all the elements are in white, see attached image.

John

Attachment: Screen_Shot_20191022_at_6.51.47_AM.png_8fe09527.zip

1 Reply

HM Hemalatha Marikumar Syncfusion Team October 23, 2019 07:04 AM UTC

Hi John, 
  
Greetings from Syncfusion. 
  
Query 1: Is there a way to set the legend color for the category labels. 
 
Yes, you can achieve this requirement by binding the series Color property to TextColor of ChartAxisLabelStyle which is available in ChartAxis as like in below code snippet. 
  
Code Snippet[Xaml]: 
 <chart:CategoryAxis > 
                    <chart:CategoryAxis.LabelStyle> 
                        <chart:ChartAxisLabelStyle TextColor="{Binding Source={x:Reference series},Path=Color }"/> 
                    </chart:CategoryAxis.LabelStyle> 
</chart:CategoryAxis> 
  
<chart:SfChart.Series> 
                <chart:ColumnSeries x:Name="series" Color="#FFFEBE17" Label="ColumnSeries" XBindingPath="XValue" YBindingPath="YValue" ItemsSource="{Binding Data}" /> 
</chart:SfChart.Series> 
  
Query 2: And also the grid displayed behind the chart? I have set the background to black on UWP to show all the elements are in white. 
 
You can achieve this requirement by customizing the MajorGridLineStyleMajorTickStyle and AxisLineStyle which is available in ChartAxis and ChartLegendLabelStyle in ChartLegend as like in below code snippet. 
  
Code Snippet[Xaml]: 
  
<chart:CategoryAxis > 
                    <chart:CategoryAxis.LabelStyle> 
                        <chart:ChartAxisLabelStyle TextColor="{Binding Source={x:Reference series},Path=Color}"/> 
                    </chart:CategoryAxis.LabelStyle> 
                    <chart:CategoryAxis.MajorGridLineStyle> 
                        <chart:ChartLineStyle StrokeColor="White"/> 
                    </chart:CategoryAxis.MajorGridLineStyle> 
                    <chart:CategoryAxis.MajorTickStyle> 
                        <chart:ChartAxisTickStyle StrokeColor="White"/> 
                    </chart:CategoryAxis.MajorTickStyle> 
                   <chart:CategoryAxis.AxisLineStyle> 
                        <chart:ChartLineStyle StrokeColor="White"/> 
                    </chart:CategoryAxis.AxisLineStyle> 
  </chart:CategoryAxis> 
<chart:ChartLegend> 
                    <chart:ChartLegend.LabelStyle> 
                        <chart:ChartLegendLabelStyle TextColor="White"/> 
                    </chart:ChartLegend.LabelStyle> 
</chart:ChartLegend> 
  
  
And we have prepared a sample based on your requirement and you can download the sample from the below link. 
  
  
Screenshot: 
 
Please let us know if need any further assistance. 
 
Regards, 
Hemalatha M. 


Loader.
Live Chat Icon For mobile
Up arrow icon