• Material 3
  • Fluent
  • Fluent2
  • Bootstrap v5
  • Tailwind CSS
  • High Contrast
Mode Selection
Theme Selection
Theme Mode
*Translated by Google Translator.

Example of Pareto Chart in ASP.NET Core Chart Control

This sample visualizes the defects in shirts with default pareto series in the chart. Data points are enhanced with marker and tooltip.


In this example, you can see how to render and configure a pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It is a combination of the column and line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.

The line series in the pareto chart can be customized using the Fill, DashArray, Width, and Marker properties in ParetoOptions. Additionally, the secondary axis in the pareto chart can be shown or hidden using the ShowAxis property in ParetoOptions.

Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.

More information on the pareto series can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
opens in a new tab