Changing tap/mouse over text on the Pie

[Emil]

Hi,

I created pie control using percentages as below. it shows results perfectly with percentage using smart labels. And when I tap on the pie in Android or mouse over in UWP as shown in the screenshot, it shows the total count of the pie element. I dont know what is this feature called but is it possible to amend the text like, instead of "33" as in the image, "33 items"?

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

            <chart:SfChart.Legend>

                <chart:ChartLegend OverflowMode="Wrap" Orientation="Horizontal" DockPosition="Top">

                    <chart:ChartLegend.LabelStyle>

                        <chart:ChartLegendLabelStyle TextColor="Blue" Margin="5" Font="Bold, Micro" />

                    </chart:ChartLegend.LabelStyle>

                </chart:ChartLegend>

            </chart:SfChart.Legend>

            <chart:SfChart.Title>

                <chart:ChartTitle Text="{Binding ChartTitle}"/>

            </chart:SfChart.Title>

            <chart:PieSeries ExplodeAll="False" EnableSmartLabels="True" ConnectorLineType="Bezier" DataMarkerPosition="OutsideExtended" EnableTooltip="True"   CircularCoefficient="1"    StartAngle="0" EndAngle="360"

                                   ItemsSource="{Binding ChartItems, Mode=OneWay}"   XBindingPath="Name" YBindingPath="Value"

                                   >

                <chart:PieSeries.DataMarker>

                    <chart:ChartDataMarker ShowLabel="True" LabelContent="Percentage">

                        <!--<chart:ChartDataMarker.LabelStyle>

                            <chart:DataMarkerLabelStyle LabelFormat="0"/>

                        </chart:ChartDataMarker.LabelStyle>

                        <chart:ChartDataMarker.ConnectorLineStyle>

                            <chart:ConnectorLineStyle StrokeColor="Gray" StrokeWidth="2"/>

                        </chart:ChartDataMarker.ConnectorLineStyle>-->

                    </chart:ChartDataMarker>

                </chart:PieSeries.DataMarker>

            </chart:PieSeries>

            <chart:SfChart.ChartBehaviors>

                <chart:ChartZoomPanBehavior EnableSelectionZooming="True"/>

            </chart:SfChart.ChartBehaviors>

        </chart:SfChart>

[Durgadevi Selvaraj]

Hi Emil, 

 

Thanks for contacting Syncfusion Support. 

 

You can achieve this requirement(Displaying tooltip with additional text) by customizing chart tooltip using TooltipTemplate of Chart series as shown in below code, 

 

Code Snippet[XAML] 

<chart:PieSeries EnableTooltip="True"   ItemsSource="{Binding PieData}"   XBindingPath="Name" YBindingPath="Value"> 

  <chart:PieSeries.TooltipTemplate> 

           <DataTemplate>                             

               <Label Text="{Binding Value, StringFormat='{0} Items'}"/>                                    

            </DataTemplate>    

    </chart:PieSeries.TooltipTemplate> 

</chart:PieSeries> 

 

 

Please find the reference output screenshot below, 

 

 

We have prepared a sample based on provided codes and it can be downloaded from below link, 

Sample:Customizing_Tooltip
 

 

You can also refer our UG documentation link to know more about Tooltip feature in SfChart, 

Link: https://help.syncfusion.com/xamarin/sfchart/tooltip 

 

 

Regards,  

Durgadevi S 

[Emil]

Hi Durgadevi,

thank you for your help. it works fine but some cases, tool tip goes off the screen as you can see below. How can I make that this occurs on the pie directly. I tried changing OffsetX  using behaviour as below also tried with margin on datatemplate but it doesnt help.

          <chart:SfChart.ChartBehaviors>

                <chart:ChartTooltipBehavior   TextColor="White" Duration="3" Margin="30,0," OffsetX="50" Font="Bold, Micro"/> 

            </chart:SfChart.ChartBehaviors>

[Divya Venkatesan]

Hi Emil,

We are able to reproduce the issue at our end and we have logged a defect report. The fix for the reported issue will be available in our 2018 Volume 1 SP 1 release which is expected to be rolled out in the mid of March, 2018.

Regards,
Divya Venkatesan