LineSeries not displaying value

[dev clinicea]

Hi,

I am using a line series on a sfchart. I am binding a collection i.e. List<ChartData> to the ItemsSource. The line series appears fine when there are multiple items in the collection. But if there is only 1 item in the collection, the chart shows nothing.

How do I make a single item also show in a lineseries?

Tx

[Hemalatha Marikumar]

Hi Dev clinicea, 

 

Greetings from Syncfusion. 

 

Query: How do I make a single item also show in a lineseries? 

 

We would like to let you know that a line segment must require at least two data points to be plotted. If your requirement “Visibility of a single data point with LineSeries” can be achieved by using DataMarker in your sample as per the code snippet below. 

 

Code Snippet [XAML] MainPage 

<chart:SfChart x:Name="chart1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

        <chart:SfChart.PrimaryAxis> 

            <chart:NumericalAxis RangePadding="Additional" /> 

        </chart:SfChart.PrimaryAxis> 

        <chart:SfChart.SecondaryAxis> 

            <chart:NumericalAxis RangePadding="Additional"/> 

        </chart:SfChart.SecondaryAxis> 

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

                            XBindingPath="XVal"  

                            YBindingPath="YValue">         

            <chart:LineSeries.DataMarker> 

                <chart:ChartDataMarker  

                    ShowLabel="True"  

                    ShowMarker="True"/> 

            </chart:LineSeries.DataMarker> 

        </chart:LineSeries> 

 </chart:SfChart> 

 

Code Snippet [C#] [ViewModel] 

public class LineSeriesViewModel 

    { 

        public ObservableCollection<ChartModel> LineData1 { get; set; } 

        public LineSeriesViewModel() 

        { 

            LineData1 = new ObservableCollection<ChartModel> 

            { 

                new ChartModel(7, 45), 

            }; 

        } 

    } 

 

Output: 

 

 

Regards, 

Hemalatha M. 

 

 

 

 

 

[dev clinicea]

I tried it, but it still does not work :(. here is my code, screen is blank. Can you suggest what might be wrong?

            chart = new SfChart();
            chart.Title.Text = "sample title";
            chart.VerticalOptions = LayoutOptions.FillAndExpand;
           
            //xaxis
            //https://www.syncfusion.com/forums/131901/date-format-datetimeaxis
            DateTimeAxis dateTimeAxis = new DateTimeAxis();
            dateTimeAxis.Title.Text = "";
            dateTimeAxis.LabelStyle.LabelFormat = "dd-MMM";
            dateTimeAxis.LabelRotationAngle = 90;
            chart.PrimaryAxis = dateTimeAxis;
            chart.PrimaryAxis.IsVisible = true;
         


            //Initializing secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();
            secondaryAxis.RangePadding = NumericalPadding.Additional;
            chart.SecondaryAxis = secondaryAxis;
            chart.SecondaryAxis.IsVisible = true;





            //Initializing series
            series = new LineSeries();
            series.XBindingPath = "VitalID";
            series.YBindingPath = "VitalValueNum";


            series.DataMarker = new ChartDataMarker();
            //both showmarker and showlabel required to show a single data point
            series.DataMarker.ShowMarker = true;
            series.DataMarker.ShowLabel = true;
            series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Outer;
            series.DataMarker.LabelStyle.TextColor = Styles.ColorBlack;    
            series.DataMarker.LabelStyle.BorderThickness = 0;
            series.DataMarker.LabelStyle.BackgroundColor = Styles.ColorWhite;
            series.EnableTooltip = true;
           
            chart.Series.Add(series);

Attachment: Screenshot_1580898295_1274cb19.zip

[Hemalatha Marikumar]

Hi Dev clinicea, 

  

We have analyzed the provided code snippet and screenshot, we noticed that range of both chart axes has been changed and set based on the single data point. And also we have found that Additional RangePadding is not set for primary axis alone. So, to avoid this issue, please set RangePadding to the primary DateTimeAxis as per in below code snippet. 

 

C#: 

… 

chart = new SfChart() { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand}; 

            

DateTimeAxis dateTimeAxis = new DateTimeAxis(); 

dateTimeAxis.LabelStyle.LabelFormat = "dd-MMM"; 

dateTimeAxis.LabelRotationAngle = 90; 

dateTimeAxis.RangePadding = DateTimeRangePadding.Additional; 

  

NumericalAxis secondaryAxis = new NumericalAxis() 

{ 

    RangePadding = NumericalPadding.Additional, 

}; 

  

chart.PrimaryAxis = dateTimeAxis; 

chart.SecondaryAxis = secondaryAxis; 

            

LineSeries lineSeries = new LineSeries() 

{ 

    ItemsSource = viewModel.DateData, 

    XBindingPath = "Date", 

    YBindingPath = "YValue", 

}; 

  

lineSeries.DataMarker = new ChartDataMarker() 

{ 

    ShowLabel = true, 

    ShowMarker = true, 

    UseSeriesPalette = true, 

    MarkerType = DataMarkerType.Ellipse, 

    MarkerHeight = 10, 

    MarkerWidth = 10, 

    LabelStyle = new DataMarkerLabelStyle() 

    { 

        BackgroundColor = Color.Transparent, 

        TextColor = Color.Black, 

        LabelPosition = DataMarkerLabelPosition.Auto, //This is default value 

    }, 

}; 

  

chart.Series.Add(lineSeries); 

… 

  

 

Note: You have set the Position of DataMarker as outer, it may lead to have a chance of getting the reported issue. So, please set as Auto (default value). 

 

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

 

Regards,
Hemalatha M.