1. Home
  2. Forum
  3. Xamarin.Forms
  4. Line chart is causing multiple months to appear

Line chart is causing multiple months to appear

When I am using the line chart option and say one set of data has chart points  for 

Nov 
Dec 
Jan

Second series has 

NOV 

Dec

It will place two months side by side on the horzontal axis.

This is my data source


```

        public async void BindData(int? playerId, DateTime? createDate, int monthsToAdd)


   {

            progressionChartViewModel = new ProgressionChartViewModel();

            progressionChartViewModel = await api.GetPlayerProgressionChartData(playerId, createDate, monthsToAdd);

            SfChart chart = new SfChart();

            TBData = new ObservableCollection<ChartDataPoint>();

            foreach (var item in progressionChartViewModel.TBData)

            {

                TBData.Add(new ChartDataPoint(item.Month, Convert.ToDouble(item.WeightLifted)));

            }



            var line1 = new LineSeries()

            {

                ItemsSource = TBData,

                Label = "Trap Bar",

                Color = Color.Red,

                DataMarker = new ChartDataMarker()

                {

                    ShowLabel = false,

                    ShowMarker = true,

                    MarkerHeight = 10,

                    MarkerWidth = 10,

                    MarkerColor = Color.Red

                }

            };



            BPData = new ObservableCollection<ChartDataPoint>();

            foreach (var item in progressionChartViewModel.BPData)

            {

                BPData.Add(new ChartDataPoint(item.Month, Convert.ToDouble(item.WeightLifted)));

            }



            var line2 = new LineSeries()

            {

                ItemsSource = BPData,

                Label = "Bench Press",

                Color = Color.Blue,

                DataMarker = new ChartDataMarker()

                {

                    ShowLabel = false,

                    ShowMarker = true,

                    MarkerHeight = 10,

                    MarkerWidth = 10,

                    MarkerColor = Color.Blue

                }

            };



            OHPData = new ObservableCollection<ChartDataPoint>();

            foreach (var item in progressionChartViewModel.OHPData)

            {

                OHPData.Add(new ChartDataPoint(item.Month, Convert.ToDouble(item.WeightLifted)));

            }



            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.Series.Add(line1);

            performanceChart.Series.Add(line2);

            performanceChart.Series.Add(line3);


        }

How do I keep just one set of full 12 months of data but over the three series

Is their a way to format code better in posts also thanks


9 Replies
DA David March 17, 2022 05:33 AM UTC

For example I want all series to have 


January to December as the horizontal access. But the data returned may only have november in one or novemeber and december in the second if you understand me


YP Yuvaraj Palanisamy Syncfusion Team March 20, 2022 03:10 PM UTC

Hi David,  
  
You can achieve your requirement by below two ways. 
  
#Solution 1: DateTimeAxis with Minimum & Maximum  
  
By setting values for Minimum and Maximum properties of DateTimeAxis as per the below code example.  
 
CodeSnippet: 
<chart:SfChart.PrimaryAxis> 
    <chart:DateTimeAxis x:Name="dateTimeAxis"> 
        <chart:DateTimeAxis.LabelStyle> 
            <chart:ChartAxisLabelStyle TextColor="#f5f5f0" FontSize="15" LabelFormat="MMM"/> 
        </chart:DateTimeAxis.LabelStyle> 
        <chart:DateTimeAxis.Title> 
            <chart:ChartAxisTitle Text="Month" TextColor="Red" FontSize="20" FontAttributes="Bold"/> 
        </chart:DateTimeAxis.Title> 
    </chart:DateTimeAxis> 
</chart:SfChart.PrimaryAxis> 
 
DateTime dateTime = new DateTime(2021, 1, 1); 
dateTimeAxis.Minimum = dateTime; 
dateTimeAxis.Maximum = dateTime.AddMonths(11);

TBData = new ObservableCollection<ChartDataPoint>(); 
TBData.Add(new ChartDataPoint(dateTime.AddMonths(10), 30)); 
TBData.Add(new ChartDataPoint(dateTime.AddMonths(11), 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(dateTime.AddMonths(10), 70)); 
 
var line2 = new LineSeries() 
{ 
    ItemsSource = BPData, 
    Label = "Bench Press", 
    Color = Color.Red, 
    DataMarker = new ChartDataMarker() 
    { 
        ShowLabel = false, 
        ShowMarker = true, 
        MarkerHeight = 10, 
        MarkerWidth = 10, 
        MarkerColor = Color.Blue 
    } 
}; 
 
OHPData = new ObservableCollection<ChartDataPoint>(); 
OHPData.Add(new ChartDataPoint(dateTime.AddMonths(7), 44)); 
OHPData.Add(new ChartDataPoint(dateTime.AddMonths(8), 54)); 
OHPData.Add(new ChartDataPoint(dateTime.AddMonths(9), 66)); 
 
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.Series.Add(line1); 
performanceChart.Series.Add(line2); 
performanceChart.Series.Add(line3); 
 
We have attached the sample for your reference. Please find the sample from the below link.  
 
 
Output: 
 
 
#Solution 2: CategoryAxis with empty data points. 
  
By adding empty data points with NaN values for remaining month with CategoryAxis as per the below code example.  
 
Code Snippet: 
TBData = new ObservableCollection<ChartDataPoint>(); 
TBData.Add(new ChartDataPoint("Jan", 40)); 
TBData.Add(new ChartDataPoint("Feb", double.NaN)); 
TBData.Add(new ChartDataPoint("Mar", double.NaN)); 
TBData.Add(new ChartDataPoint("Apr", double.NaN)); 
TBData.Add(new ChartDataPoint("May", double.NaN)); 
TBData.Add(new ChartDataPoint("Jun", double.NaN)); 
TBData.Add(new ChartDataPoint("Jul", double.NaN)); 
TBData.Add(new ChartDataPoint("Aug", double.NaN)); 
TBData.Add(new ChartDataPoint("Sep", double.NaN)); 
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", double.NaN)); 
BPData.Add(new ChartDataPoint("Feb", double.NaN)); 
BPData.Add(new ChartDataPoint("Mar", double.NaN)); 
BPData.Add(new ChartDataPoint("Apr", double.NaN)); 
BPData.Add(new ChartDataPoint("May", double.NaN)); 
BPData.Add(new ChartDataPoint("Jun", double.NaN)); 
BPData.Add(new ChartDataPoint("Jul", double.NaN)); 
BPData.Add(new ChartDataPoint("Aug", double.NaN)); 
BPData.Add(new ChartDataPoint("Sep", double.NaN)); 
BPData.Add(new ChartDataPoint("OCT", double.NaN)); 
BPData.Add(new ChartDataPoint("NOV", 70)); 
BPData.Add(new ChartDataPoint("DEC", 82)); 
 
var line2 = new LineSeries() 
{ 
    ItemsSource = BPData, 
    Label = "Bench Press", 
    Color = Color.Red, 
    DataMarker = new ChartDataMarker() 
    { 
        ShowLabel = false, 
        ShowMarker = true, 
        MarkerHeight = 10, 
        MarkerWidth = 10, 
        MarkerColor = Color.Blue 
    } 
}; 
 
OHPData = new ObservableCollection<ChartDataPoint>(); 
OHPData.Add(new ChartDataPoint("Jan", double.NaN)); 
OHPData.Add(new ChartDataPoint("Feb", double.NaN)); 
OHPData.Add(new ChartDataPoint("Mar", double.NaN)); 
OHPData.Add(new ChartDataPoint("Apr", double.NaN)); 
OHPData.Add(new ChartDataPoint("May", double.NaN)); 
OHPData.Add(new ChartDataPoint("Jun", double.NaN)); 
OHPData.Add(new ChartDataPoint("Jul", double.NaN)); 
OHPData.Add(new ChartDataPoint("Aug", 44)); 
OHPData.Add(new ChartDataPoint("Sep", 54)); 
OHPData.Add(new ChartDataPoint("OCT", 66)); 
OHPData.Add(new ChartDataPoint("NOV", double.NaN)); 
OHPData.Add(new ChartDataPoint("DEC", double.NaN)); 
 
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.Series.Add(line1); 
performanceChart.Series.Add(line2); 
performanceChart.Series.Add(line3); 
 
We have attached the sample for your reference. Please find the sample from the below link. 
 
 
Output: 
 
 
 
For more details, please refer the below link. 
 
Please let us know if you have any further assistance. 
 
Regards, 
Yuvaraj. 


DA David May 10, 2022 02:52 PM UTC

Thanks again one final question

Here you will see the person has a score of 195 its desinagted by the red dot however when I hover over the dot their is no tooltip data showing the value the player as that the user can only guess what their at here? Is their a way to get a tooltip to display thanks



YP Yuvaraj Palanisamy Syncfusion Team May 11, 2022 12:31 PM UTC

Hi David,


We have checked the reported problem “Tooltip is not shown in the edge segment” and it was working fine at our end. Please ensure once again that you can read the tooltip label by hovering your cursor over the segment. Also, we have attached the sample for your reference. Please find the sample from the below attachment.

If still you are facing the problem, please revert us the modified sample with issue reproduced state which will be helpful to provide the better solution at the earliest.


Output:


Regards,

Yuvaraj.


Attachment: ChartSample_81c3e1bb.zip

DA David May 11, 2022 02:43 PM UTC

HI THE SOLUTION APPEARS TO HAVE GOT OVER WRITTEN WITH ONE TO DO WITH THE RIBBON I GET WINDOWSRIBBON-master when I click on the download above.


DA David May 11, 2022 03:10 PM UTC

Never mind the issue seemed to resolve itself what I was missing was


EnableTooltip = true,

Is their a way to customize the tool tip so I can show what acitivty it was they did?



YP Yuvaraj Palanisamy Syncfusion Team May 12, 2022 12:19 PM UTC

Hi David,


Thanks for your information. You can customize the Xamarin.Forms SfChart tooltip. Please refer the below ug document for tooltip customization.


https://help.syncfusion.com/xamarin/charts/tooltip#customizing-appearance


Regards,

Yuvaraj.


DA David May 23, 2022 08:59 PM UTC

One thing to note ur tool tip is only showing whole numbers even though i pass say 10.35 I need the tool tip to be able to show the decimal value is their anyway?


YP Yuvaraj Palanisamy Syncfusion Team May 24, 2022 09:25 AM UTC

Hi David,


You can resolve this by using TooltipTemplate support in Xamarin.Forms SfChart. Please find the code example below.


CodeSnippet:

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

                  XBindingPath="XValue"

                  YBindingPath="YValue" 

                  EnableTooltip="True">

    <chart:LineSeries.TooltipTemplate>

        <DataTemplate>

                <Label Text="{Binding YValue}"/>

        </DataTemplate>                       

    </chart:LineSeries.TooltipTemplate>          

</chart:LineSeries>



Output:


For more details, please refer the below link

https://help.syncfusion.com/xamarin/charts/tooltip#tooltip-template


Regards,

Yuvaraj.


Loader.
Up arrow icon