How to Render Multi-series Chart in the Blazor Pivot Table?

Introduction

In modern data visualization, rendering multi-series pivot charts offers a comprehensive view for comparing various data series across the same period or categories. This is particularly useful when working with complex datasets, as it allows for a more intuitive understanding of the data. This article explains how to render a multi-series pivot chart in the Blazor Pivot Table component.

Rendering multi-series pivot chart

To render a multi-series chart in a pivot table, use the ChartSeriesCreated event. This event is triggered when the pivot chart series are created, allowing you to customize the series to meet your requirements. The code example below 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 holds 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 modification will display the specified series as line charts in the pivot table.

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

Screenshot

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

Conclusion

We 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 features, documentation, and how to quickly get started with configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, our Blazor components available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.

If you have any questions 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!