Category / Section
How to change the color of axis elements?
4 mins read
Essential chart for Xamarin.Forms provides support to customize the appearance of ChartAxis elements such as grid lines, tick lines, labels, axis line, and axis title. By using the properties that end with the text ‘Style’ in the respective axis class, you can customize the color, font, width, size etc., of the axis elements.
The following code illustrates how to change the color of axis elements.
C#
CategoryAxis axis = new CategoryAxis (); //To change axis line color axis.AxisLineStyle = new ChartLineStyle (); axis.AxisLineStyle.StrokeColor = Color.Blue; //To change axis major grid line color axis.MajorGridLineStyle = new ChartLineStyle(); axis.MajorGridLineStyle.StrokeColor = Color.Blue; //To change axis ticks color axis.MajorTickStyle = new ChartAxisTickStyle(); axis.MajorTickStyle.StrokeColor = Color.Blue; //To change axis label text color axis.LabelStyle = new ChartAxisLabelStyle(); axis.LabelStyle.TextColor = Color.Blue;
XAML
<chart:SfChart.PrimaryAxis> <chart:CategoryAxis LabelPlacement = "BetweenTicks" > <!--To change axis line color--> <chart:CategoryAxis.AxisLineStyle> <chart:ChartLineStyle StrokeColor="Blue" /> </chart:CategoryAxis.AxisLineStyle> <!--To change axis major grid line color--> <chart:CategoryAxis.MajorGridLineStyle> <chart:ChartLineStyle StrokeColor="Blue" /> </chart:CategoryAxis.MajorGridLineStyle> <!--To change axis label text color--> <chart:CategoryAxis.LabelStyle> <chart:ChartAxisLabelStyle TextColor="Blue"/> </chart:CategoryAxis.LabelStyle> <!--To change axis ticks color--> <chart:CategoryAxis.MajorTickStyle> <chart:ChartAxisTickStyle StrokeColor="Blue"/> </chart:CategoryAxis.MajorTickStyle> </chart:CategoryAxis > </chart:SfChart.PrimaryAxis>
Output:
