Example of Pareto Chart in React Chart Component


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

More Details...


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.

Injecting Module

In this example, we have used pareto series with the help of column and line series. To use pareto feature, we need to inject ParetoSeries, ColumnSeries and LineSeries modules into services.

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