How to show custom data in the Pivot Table tooltip?

[Syncfusion Support]

Answer:

We can achieve this by enabling the tooltip feature by setting the Enable property in the PivotChartTooltipSettings tag to true.

<SfPivotView TValue="PivotProductDetails" Width="800" Height="80%" >  

       <PivotViewDataSourceSettings DataSource="@Data">  

            <PivotViewColumns>  

                <PivotViewColumn Name="Country"></PivotViewColumn>  

                <PivotViewColumn Name="Products"></PivotViewColumn>  

            </PivotViewColumns>  

            <PivotViewRows>  

                <PivotViewRow Name="Year"></PivotViewRow>  

                <PivotViewRow Name="Quarter"></PivotViewRow>  

            </PivotViewRows>  

            <PivotViewValues>  

                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>  

                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>  

            </PivotViewValues>  

            <PivotViewFormatSettings>  

                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>  

            </PivotViewFormatSettings>  

        </PivotViewDataSourceSettings>  

        <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>  

        <PivotChartSettings Title="Sales Analysis">  

            <PivotChartSeries Type=ChartSeriesType.Column></PivotChartSeries>  

            <PivotChartPrimaryYAxis>  

                <PivotChartPrimaryYAxisBorder Width="0"></PivotChartPrimaryYAxisBorder>  

            </PivotChartPrimaryYAxis>  

            <PivotChartTooltipSettings Enable="true">  

                <Template>  

                    @{   

                        var data = context as Syncfusion.Blazor.Charts.ChartTooltipInfo;  

                        <div>The series name is <b>@data.SeriesName</b> and  

                           the X value is @data.PointX and the Y value is @data.PointY</div>  

                    }  

                </Template>  

            </PivotChartTooltipSettings>  

        </PivotChartSettings>  

    </SfPivotView>  

Find the sample for show custom data in the Pivot Table tooltip from here.

[Jason Bishop]

This answer shows how to add a custom tooltip to the chart.   How do you add a custom tooltip to the pivot TABLE?

[Manikandan Murugesan]

Hi Jason, 

 

Please use the "CellTemplate" option to create custom tooltip for the pivot table. Please see the code example below. 

 

Code Example: 

       <PivotViewTemplates> 

        <CellTemplate> 

            @{ 

                var data = (context as AxisSet); 

                if (data != null) 

                { 

                    if (data.Axis == "value") 

                    { 

                        var row = "Row : " + (context.IsGrandSum && context.RowHeaders.ToString() == "" ? "Grand Total" : string.Join('-', context.RowHeaders.ToString().Split('.'))); 

                        var column = "Column : " + (context.IsGrandSum && context.ColumnHeaders.ToString() == "" ? "Grand Total" : string.Join('-', context.ColumnHeaders.ToString().Split('.'))); 

                        var value = context.ActualText + " : " + context.FormattedText; 

                        Count++; 

                        <SfTooltip Target="#txt" @key="@Count"> 

                            <TooltipTemplates> 

                                <Content> 

                                    <div>@row </div> 

                                    <div>@column</div> 

                                    <div>@value</div> 

                                </Content> 

                            </TooltipTemplates> 

                            <div id="txt">@context.FormattedText</div> 

                        </SfTooltip> 

                    } 

                    else 

                    { 

                        @data.FormattedText 

                    } 

                } 

            } 

        </CellTemplate> 

    </PivotViewTemplates> 

 

Meanwhile, we have prepared a sample for your reference. Please find it from below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PivotServerDemo1276466713 

 

Please see the following UG document for more information on the "CellTemplate" option. 

https://blazor.syncfusion.com/documentation/pivot-table/row-and-column#cell-template 

Please let us know if you have any concerns. 

 

Regards, 

Manikandan