How to render multi-series pivot chart in the Blazor Pivot Table component?

Introduction

In modern data visualization, rendering multi-series pivot charts offers a comprehensive view for comparing various data series over the same period or categories. This can be particularly useful when dealing with complex datasets, allowing for a more intuitive understanding of the data. This article will explain how you can render a multi-series pivot chart in the Blazor Pivot Table component.

Rendering multi-series pivot chart

In order to render a multi-series chart in a pivot table, you can use the ChartSeriesCreated event. This event is triggered when the pivot chart series are created, allowing you to customize the series according to your requirements. Below is a code example that demonstrates how to use this event to display multiple series as different types of charts.

[Index.razor]

<SfPivotView @ref="Pivot" TValue="RData" Height="500">
     ...
    <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>
    <PivotChartSettings>
        <PivotChartSeries Type=Syncfusion.Blazor.PivotView.ChartSeriesType.Column></PivotChartSeries>
    </PivotChartSettings>
    <PivotViewEvents TValue="RData" ChartSeriesCreated="chartSeries"></PivotViewEvents>
</SfPivotView>

@code { 
    private void chartSeries(ChartSeriesCreatedEventArgs args)
    {
        for (var i = 0; i < args.Series.Count; i++)
        {
            if (args.Series[i].Name == "Solar" || args.Series[i].Name == "Wind")
            {
                // Here we have displayed "Solar" and "Wind" series as Line chart.
                args.Series[i].Type = Syncfusion.Blazor.Charts.ChartSeriesType.Line;

            }
        }

    }
}

In the above code snippet, we iterate through the args.Series array, which contains the chart series. We check the Name property of each series, and when it matches Solar or Wind, we change the series type to Line. This change will display the specified series as line charts in the pivot table.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

You can refer to this GitHub sample for a practical demonstration of this code.

Conclusion

I hope you enjoyed learning how to render a multi-series pivot chart in the Blazor Pivot Table component.

You can also refer to our Blazor 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 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!