How to open the chart type settings dialog in an Angular Pivot Table via an external button?

Introduction

When working with Angular Pivot Table, there may be occasions where you wish to open the chart type settings dialog using an external button rather than relying on the built-in toolbar options. This approach enhances user interaction by providing a more accessible way to dynamically change the chart type and choose from multiple axis modes, such as “Single”, “Stacked”, or “Combined”, according to your preferences. This article outlines the steps to open the chart type settings dialog programmatically via an external button.

Step 1: Add an external button

First, incorporate an external button within your HTML file, typically named app.component.html. This button will be used to trigger the opening of the chart type settings dialog.

Here is a code sample that demonstrates how to add a button using the Syncfusion Button component:

[app.component.html]

<button ejs-button #chartType id="ChartType" (click)="onChange()" [isPrimary]="true">Chart Type Settings Dialog</button>
<ejs-pivotview #pivotview id='PivotView' [displayOption]=displayOption [showToolbar]='true' [toolbar]='toolbarOptions'>
</ejs-pivotview>

Step 2: Opening the chart type settings dialog

After setting up the button, you need to implement the logic to open the chart type settings dialog when the button is clicked. This involves adding a method in your TypeScript file (i.e., app.component.ts) that will be executed upon the button click.

[app.component.ts]

import { PivotViewModule, DisplayOption, ToolbarService, ToolbarItems, PivotView } from '@syncfusion/ej2-angular-pivotview';

@Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    providers: [ToolbarService],
    templateUrl: 'app.component.html',
    standalone: true,
    imports: [PivotViewModule, ButtonModule]
})

export class AppComponent {
    public displayOption: DisplayOption;
    public toolbarOptions!: ToolbarItems[];

    @ViewChild('pivotview')
    public pivotView: PivotView;

    onChange() {
        (this.pivotView.toolbarModule as any).createChartTypeDialog();
    }

    ngOnInit(): void {
        this.toolbarOptions = ['Chart'] as ToolbarItems[];
        this.displayOption = { view: 'Chart' } as DisplayOption;

    }
}

In the code example above, within the onChange() method, we invoke the this.pivotView.toolbarModule.createChartTypeDialog() method to effectively open the chart type settings dialog.

The following GIF image portrays the results of the code snippet mentioned above:

GIF

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

Conclusion

By following the steps outlined in this guide, you can easily open the chart type settings dialog in an Angular Pivot Table via an external button.

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!