Chart has got me so close to their but cant change font of verticle axis how?

Question

I am trying to do a chart like the demos where it has the months along the bottom jan to dec and then in the verticial it has weightsHowever I cannot for the life of me see how to change this color as u see below the vaules in the verticle side are way to hard to see. their like a gray on black This is what I have so far ```

David · Answer

My Code behind for my model

public void BindData()

{

SfChart chart = new SfChart();

TBData = new ObservableCollection<ChartDataPoint>();

TBData.Add(new ChartDataPoint("Jan", 32));

TBData.Add(new ChartDataPoint("Feb", 42));

TBData.Add(new ChartDataPoint("Mar", 32));

TBData.Add(new ChartDataPoint("Apr", 42));

TBData.Add(new ChartDataPoint("May", 44));

TBData.Add(new ChartDataPoint("Jun", 33));

TBData.Add(new ChartDataPoint("Jul", 42));

TBData.Add(new ChartDataPoint("Aug", 34));

TBData.Add(new ChartDataPoint("Sep", 60));

TBData.Add(new ChartDataPoint("OCT", 40));

TBData.Add(new ChartDataPoint("NOV", 30));

TBData.Add(new ChartDataPoint("DEC", 42));

var line1 = new LineSeries()

{

ItemsSource = TBData,

Label = "Trap Bar",

Color = Color.FromHex("#01a79f"),

DataMarker = new ChartDataMarker()

{

ShowLabel = false,

ShowMarker = true,

MarkerHeight = 10,

MarkerWidth = 10,

MarkerColor = Color.Green

}

};

BPData = new ObservableCollection<ChartDataPoint>();

BPData.Add(new ChartDataPoint("Jan", 12));

BPData.Add(new ChartDataPoint("Feb", 32));

BPData.Add(new ChartDataPoint("Mar", 42));

BPData.Add(new ChartDataPoint("Apr", 32));

BPData.Add(new ChartDataPoint("May", 54));

BPData.Add(new ChartDataPoint("Jun", 23));

BPData.Add(new ChartDataPoint("Jul", 32));

BPData.Add(new ChartDataPoint("Aug", 44));

BPData.Add(new ChartDataPoint("Sep", 50));

BPData.Add(new ChartDataPoint("OCT", 60));

BPData.Add(new ChartDataPoint("NOV", 70));

BPData.Add(new ChartDataPoint("DEC", 82));

var line2 = new LineSeries()

{

ItemsSource = BPData,

Label = "Bench Press",

Color = Color.Black,

DataMarker = new ChartDataMarker()

{

ShowLabel = false,

ShowMarker = true,

MarkerHeight = 10,

MarkerWidth = 10,

MarkerColor = Color.Blue

}

};

OHPData = new ObservableCollection<ChartDataPoint>();

OHPData.Add(new ChartDataPoint("Jan", 42));

OHPData.Add(new ChartDataPoint("Feb", 36));

OHPData.Add(new ChartDataPoint("Mar", 45));

OHPData.Add(new ChartDataPoint("Apr", 40));

OHPData.Add(new ChartDataPoint("May", 54));

OHPData.Add(new ChartDataPoint("Jun", 26));

OHPData.Add(new ChartDataPoint("Jul", 32));

OHPData.Add(new ChartDataPoint("Aug", 44));

OHPData.Add(new ChartDataPoint("Sep", 54));

OHPData.Add(new ChartDataPoint("OCT", 66));

OHPData.Add(new ChartDataPoint("NOV", 74));

OHPData.Add(new ChartDataPoint("DEC", 32));

var line3 = new LineSeries()

{

ItemsSource = OHPData,

Label = "Over Head Press",

Color = Color.Orange,

DataMarker = new ChartDataMarker()

{

ShowLabel = false,

ShowMarker = true,

MarkerHeight = 5,

MarkerWidth = 5,

MarkerColor = Color.Orange

}

};

performanceChart.PrimaryAxis = new DateTimeAxis()

{

IntervalType = DateTimeIntervalType.Months,

Interval = 12,

};

performanceChart.Series.Add(line1);

performanceChart.Series.Add(line2);

performanceChart.Series.Add(line3);

David · Answer

Also I am not displaying the months along the bottom as they should do please help

Devakumar Dhanapoosanam · Answer

Hi David, Due to applying the chart BackgroundColor as "Black" axis labels are not visible which already in black text color. You can resolve this by using TextColor of the axis LabelStyle property as per the below code example. … Please refer the below link for more details, UG: https://help.syncfusion.com/xamarin/charts/axis#label-customization KB: https://www.syncfusion.com/kb/5780/how-to-change-the-color-of-axis-elements Query: Also I am not displaying the months along the bottom as they should We have found that you have changed the PrimaryAxis as DateTimeAxis in code behind. You can resolve this by removing the below code snippet. performanceChart.PrimaryAxis = new DateTimeAxis() { IntervalType = DateTimeIntervalType.Months, Interval = 12, }; https://help.syncfusion.com/xamarin/charts/working-with-data#custom-object Also, we have prepared a sample with provided code snippet, please download from the below link. Sample: https://www.syncfusion.com/downloads/support/forum/173250/ze/173250309820353.zip Output: Please let us know if you need any further assistance on this. Regards, Devakumar D

David · Answer

Hi THAT is great but what about the font size on the axis can this be changed at all?First class support from Syncfusion as always

Yuvaraj Palanisamy · Answer

Hi David, You can customize the axis label font size with the help of FontSize property of ChartAxisLabelStyle as per the below code example. CodeSnippet: Output: For more details, please refer the below link https://help.syncfusion.com/xamarin/charts/axis#label-customization Regards, Yuvaraj.

David · Answer

I need to construct my chart data in a web api project but the problem I have is that ChartDataPoint is stored in

Syncfusion.SfChart.XForms is their a way I can safely access ChartDataPoint class from my asp.net web api layer at all?

Yuvaraj Palanisamy · Answer

Hi David,

Instead of using ChartDataPoint class from SfChart, you can construct the chart data using custom object collection with the help of Model and ViewModel class from web api project. Then set the custom object collection to the ItemsSource property of ChartSeries and also, need to set the XBindingPath and YBindingPath properties of ChartSeries as per the below code example.

CodeSnippet:

<chart:LineSeries ItemsSource="{Binding Demands}"

XBindingPath="Demand"

YBindingPath="Year2010"/>

[C#]

public class MonthDemand

{

public MonthDemand(string demand, double year2010, double year2011)

{

this.Demand = demand;

this.Year2010 = year2010;

this.Year2011 = year2011;

}

public string Demand { get; set; }

public double Year2010 { get; set; }

public double Year2011 { get; set; }

}

public class DataModel

{

public ObservableCollection<MonthDemand> Demands{ get; set; }

public DataModel ()

{

Demands = new ObservableCollection<MonthDemand>();

Demands.Add(new MonthDemand("Jan", 42, 27));

Demands.Add(new MonthDemand("Feb", 44, 28));

Demands.Add(new MonthDemand("Mar", 53, 35));

Demands.Add(new MonthDemand("Apr", 64, 44));

Demands.Add(new MonthDemand("May", 75, 54));

Demands.Add(new MonthDemand("Jun", 83, 63));

}

For more details, please refer the below link

UG: https://help.syncfusion.com/xamarin/charts/working-with-data#custom-object

KB: https://www.syncfusion.com/kb/11267/how-to-bind-the-sqlite-database-to-the-xamarin-forms-chart

Please let us know, if you have any further assistance.

Regards,

Yuvaraj.