How to customize the tooltip content in a Pivot Chart in Angular?

4 mins read

Introduction

In certain scenarios, in Angular Pivot Table you might want to customize tooltip content to personalize the appearance of your Pivot Chart. This article will demonstrate how to achieve this customization through code examples.

Customizing tooltip content

Tooltips provide additional information when hovering over the chart series. If you want to customize the information displayed in the tooltip content, use the tooltipRender event. This event triggers before the tooltip for the series is rendered and allows you to personalize the appearance of the tooltip UI according to your specific needs.

Here is a code snippet demonstrating how to customize the tooltip content:

[app.component.html]

    <ejs-pivotview #pivotview id='PivotView' [chartSettings]="chartSettings" [displayOption]="displayOption">
    </ejs-pivotview>

[app.component.ts]

import { ITooltipRenderEventArgs, Series } from '@syncfusion/ej2-charts';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings';
import { PivotView, DisplayOption} from '@syncfusion/ej2-angular-pivotview';
import { Observable } from 'rxjs';

export class AppComponent {
    public chartSettings: ChartSettings;
    public displayOption: DisplayOption;
    public observable = new Observable();

    tooltipRender(args: ITooltipRenderEventArgs) {
        // Extract the data source for the chart series that is being hovered over.
        const dataSource: any = args.series.dataSource ? args.series.dataSource
            : this.pivotObj.chart.series[args.data.seriesIndex].dataSource;
        // Extract the respective row index for the chart series that is being hovered over.
        const rowIndex: number = dataSource ? dataSource[args.data.pointIndex].rIndex : undefined;
        // Retrieve the column index for the chart series that is being hovered over.
        const colIndex: number = dataSource ? dataSource[args.data.pointIndex].cIndex : undefined;
        // Retrieve the pivot values based on row and column index.
        const pivotValue: IAxisSet = this.pivotObj.pivotValues[rowIndex][colIndex] as IAxisSet;
        // Retrieve the measure field information for the chart series that is being hovered over.
        const measureField: any = this.pivotObj.engineModule.fieldList[pivotValue.actualText];
        // Get the aggregation type (e.g., 'Sum', 'Average').
        const aggregateType: string = this.pivotObj.localeObj.getConstant(measureField.aggregateType); 
        const valueField =  aggregateType + ' of ' + pivotValue.actualText;
        // Custom formatting for current hovered chart series value.
        var intl = new Internationalization();
        var formattedString = intl.formatNumber(pivotValue.value, {
            // Specify your desired format here.
            format: "$ ###.0000",  
        });
        // Modify the tooltip content based on the above gathered information.
        args.text = 'Value Field: ' + valueField + 
        ' <br/>' + 'Value: ' + formattedString +
        (this.dataSourceSettings.columns.length === 0 ? '' :
            (' <br/>' + 'Column Headers: ' + pivotValue.columnHeaders)) +
        (this.dataSourceSettings.rows.length === 0 ? '' :
            (' <br/>' + 'Row Headers: ' + pivotValue.rowHeaders));
    }
    
    ngOnInit(): void {
        this.chartSettings = {
            tooltipRender: this.observable.subscribe(
              this.tooltipRender.bind(this)
            ) as any,
            title: 'Sales Analysis',
            chartSeries: { type: 'Column' },
          } as ChartSettings;
      
        this.displayOption = { view: 'Chart' } as DisplayOption;
    }
}

The following steps explain the above code snippet:

First, within the tooltipRender event, we extract the data source for the chart series that is being hovered over using the args.series.dataSource property.
Following this, we identify the relevant row and column indices to obtain the specific pivot values that represent the data in the hovered chart series.
Then, we access the field information from the pivot engine to retrieve the aggregate type of the measure field.
Subsequently, we use the Internationalization class to format the values in a particular format, such as “$ ###.0000”.
Finally, we use the args.text property to set the tooltip content based on the previously acquired information. This information can include the value field, formatted value, and row and column headers from the pivotValues

The following screenshot, which portrays the difference between before and after customizing tooltip content,

Screenshots

Before customizing tooltip content,

After customizing tooltip content,

For a practical demonstration, refer to the sample of stackblitz.

Conclusion

I hope you enjoyed learning how to tooltip content in a Pivot Chart in Angular.

You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)