How to change the position of a specific Pivot Chart series in Angular PivotTable?

Introduction

In certain scenarios, you might want to rearrange the display order of the series in your pivot chart. For instance, you may want to move a specific series to the end of the chart for improved visibility or comparison. This article explains how to change the position of a chart series using the chartSeriesCreated event in Angular Pivot Table. This event is triggered when the pivot chart series is created, thus enabling you to personalize the series according to your requirements.

Code example

Here is a sample code snippet in which we move the “Germany” series to the last position in a pivot chart:

[app.component.html]

<ejs-pivotview #pivotview id="PivotView" [displayoption]="displayOption" [chartsettings]="chartSettings"
     (chartseriescreated)="chartSeriesCreated($event)"> 
</ejs-pivotview>

[app.component.ts]

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

export class AppComponent {
    public displayOption: DisplayOption;

    chartSeriesCreated(args: ChartSeriesCreatedEventArgs) {
        // Loop through the chart series array
        for (let i = 0; i < (args.series as any).length; i++) {
            // Initialize a variable to hold the index of the series to be moved
            let indexOfGermany;
            // Check if the current series name matches the one to be moved
            if(args.series[i].name=="Germany") {
                // Get the index of the series named "Germany"
                indexOfGermany = args.series.indexOf(args.series[i]);
                // Store the series to be moved in a temporary variable
                let selectedSeries = args.series[indexOfGermany];
                // Remove the series from its current position
                args.series.splice(indexOfGermany, 1);
                // Add the series back to the array at the last position
                args.series.splice(args.series.length, 0, selectedSeries);
            }
        }
    }
    
    ngOnInit(): void {      
        this.displayOption = { view: 'Chart' } as DisplayOption;
    }
}

In the above code sample, we use the chartSeriesCreated event to iterate through the args.series array in order to identify the series named “Germany”. After finding it, we remove it from its existing index and attach it to the end of the array. This will display the “Germany” series at the end of the chart.

Note: This approach is general and can be used to move any series to any desired position by simply modifying the condition within the loop and the index where the series is to be inserted.

The following screenshot portrays the difference between before and after changing the position of the chart series:

Screenshots:

Before changing the position:

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

Conclusion:

I hope you enjoyed learning how to change the position of a specific Pivot Chart series in an Angular Pivot Table.

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!