Search code examples
c#xamarinmobilegraphsyncfusion

Fill syncfusion xamarin legend when graph consists of line series and column series


I have a graph with lineseries and columnseries. I added legend and it shows two empty bubbles. How can I give names to line and to columns - "Symptoms" for line and "Medicines" for yellow bars? Its like groups: line represents symptom severity and columns represent medicines amount taken:

Original graph (no legend titles)

I tried creating string list ListNames and assigning to legend but it doesnt work. My code for graph:

<chart:SfChart x:Name="barChart"
               Margin="30,30,30,40"
               HeightRequest="300">

    <chart:SfChart.Legend>
        <chart:ChartLegend DockPosition="Top"
                           OffsetY="-10"
                           Orientation="Horizontal"
                           ToggleSeriesVisibility="True"
                           Series="{Binding ListNames}">

            <chart:ChartLegend.LabelStyle>
                <chart:ChartLegendLabelStyle FontSize="15" />
            </chart:ChartLegend.LabelStyle>
        </chart:ChartLegend>

    </chart:SfChart.Legend>

    <chart:SfChart.PrimaryAxis>
        <chart:DateTimeAxis LabelRotationAngle="-45"
                            RangePadding="RoundStart">
            <chart:DateTimeAxis.LabelStyle>

                <chart:ChartAxisLabelStyle LabelFormat="yyyy-MM-dd"
                                           TextColor="gray">
                </chart:ChartAxisLabelStyle>
            </chart:DateTimeAxis.LabelStyle>

            <chart:DateTimeAxis.Title>
                <chart:ChartAxisTitle Text="Data"
                                      TextColor="#7a7a7a" />
            </chart:DateTimeAxis.Title>
        </chart:DateTimeAxis>

    </chart:SfChart.PrimaryAxis>

    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis Minimum="1"
                             Maximum="11"
                             RangePadding="RoundStart">
            <chart:NumericalAxis.Title>
                <chart:ChartAxisTitle Text="Intensyvumas"
                                      TextColor="#7a7a7a" />
            </chart:NumericalAxis.Title>
        </chart:NumericalAxis>
    </chart:SfChart.SecondaryAxis>

    <chart:ColumnSeries x:Name="ColumnSeriesSymptoms"
                        ItemsSource="{Binding MedicineDates}"
                        XBindingPath="Date"
                        YBindingPath="Dose"
                        EnableAnimation="true"
                        AnimationDuration="0.8">
    </chart:ColumnSeries>

    <chart:SplineSeries x:Name="SplineSeriesSymptoms2"
                        ItemsSource="{Binding SymptomDates2}"
                        XBindingPath="Date"
                        YBindingPath="Severity"
                        EnableAnimation="true"
                        AnimationDuration="0.8">

        <chart:SplineSeries.YAxis>
            <chart:NumericalAxis OpposedPosition="true"
                                 Minimum="1"
                                 Interval="2"
                                 EdgeLabelsDrawingMode="Fit">
            </chart:NumericalAxis>
        </chart:SplineSeries.YAxis>
    </chart:SplineSeries>

</chart:SfChart>

Solution

  • To give names to the line series and column series in your legend, you can use the Label property of each series. Below, add how to customize the legend for reference: https://help.syncfusion.com/xamarin/charts/legend. Refer to the following link to customize the appearance of legend items: https://help.syncfusion.com/xamarin/charts/legend?cs-save-lang=1&cs-lang=xaml.

    <chart:ColumnSeries ItemsSource="{Binding Data}"
                    XBindingPath="Date"
                    YBindingPath="Dose"   
                    **Label="Symptoms"**>
     </chart:ColumnSeries>
    
    <chart:SplineSeries ItemsSource="{Binding MedicineData}"
                    XBindingPath="Date"
                    YBindingPath="Severity"                                               
                    **Label="Medicines"**>
    </chart:SplineSeries>
    

    Chart image with legend

    Regards,

    Sowndharya Selladurai.