Chart - ColumnSeries - AxisX label

[Tomas Turek]

Hi,

I'm creating something like Dashboard.

When I use line chart (2), everything looks good. But when I use column chart (1), the X-axis labels are not visible and the TrackBall is truncated.

I use the same code for both types of graphs (only the series type changes).

Any advice on how to display X-axis labels for bar graphs as well?

Note: about a year ago (before some update) the labels worked fine.

I enclose the image and code.

Attachment: ChartLabels_6afdfc58.zip

[Devakumar Dhanapoosanam]

Hi Tomas Turek, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and the provided code snippet, based on the provided details we found that you were using the DateTimeAxis with string data type for date time values in X-Value data. In this case we recommend using the CategoryAxis for string data type and use the DateTimeAxis for DateTime data type values as per below solutions. 

Solution 1: Using DateTimeAxis as primary axis with DateTime data as x values 

 

public class PageOverviewChartModel 

{ 

    public DateTime ValueX { get; set; } 

    public string ValueY { get; set; } 

    public double ID_OverviewView { get; set; } 

} 

 

…
itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,
                           ValueX = DateTime.Today.AddDays(-7), ValueY = "350" }); 

itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,  

                           ValueX = DateTime.Today.AddDays(-6), ValueY = "259" }); 

itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,  

                           ValueX = DateTime.Today.AddDays(-5), ValueY = "17" }); 

…

var primaryDateTimeAxis = new DateTimeAxis(); 

primaryDateTimeAxis.ShowTrackballInfo = true; 

primaryDateTimeAxis.LabelStyle.LabelFormat =  "dd.MM.";
chart.PrimaryAxis = primaryDateTimeAxis; 

 

…
if (item.TypeValue == 2)      //column 

 { 

     var series = new ColumnSeries(); 

     series.ItemsSource = itemDetailChart; 

     series.Color = Color.Blue; 

     series.EnableTooltip = true; 

     series.XBindingPath = "ValueX"; 

     series.YBindingPath = "ValueY"; 

     chart.Series.Add(series); 

 } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169833/ze/169833-508278192.zip  

 

Output: 

 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#date-time-axis  

KB: https://www.syncfusion.com/kb/10812/how-to-set-the-milliseconds-label-format-for-axis-and-trackball-label-in-xamarin-forms  

 

Solution 2: Using CategoryAxis as primary axis with string data as x values 

 

public class PageOverviewChartModel 

{ 

    public string ValueX { get; set; } 

    public string ValueY { get; set; } 

    public double ID_OverviewView { get; set; } 

} 

 

… 

itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,  

                        ValueX = DateTime.Today.AddDays(-7).ToShortDateString(), ValueY = "350" }); 

itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,  

                        ValueX = DateTime.Today.AddDays(-6).ToShortDateString(), ValueY = "259" }); 

itemOverviewChart.Add(new PageOverviewChartModel() { ID_OverviewView = 23,  

                        ValueX = DateTime.Today.AddDays(-5).ToShortDateString(), ValueY = "17" }); 

… 

 

var primaryDateTimeAxis = new CategoryAxis(); 

primaryDateTimeAxis.ShowTrackballInfo = true;
chart.PrimaryAxis = primaryCategroyAxis; 

… 

 

…
if (item.TypeValue == 2)      //column 

 { 

     var series = new ColumnSeries(); 

     series.ItemsSource = itemDetailChart; 

     series.Color = Color.Blue; 

     series.EnableTooltip = true; 

     series.XBindingPath = "ValueX"; 

     series.YBindingPath = "ValueY"; 

     chart.Series.Add(series); 

 } 

 

 

Output:  

 

 

Note: CategoryAxis is an indexed based axis that plots values based on the index of the data point collection. The points are equally spaced here. 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#category-axis  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D