• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Mode Selection
Theme Selection
*Translated by Google Translator.
Essential Studio
All Controls

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.