React Pareto Chart

Pareto charts visualize category values alongside their cumulative percentage. They combine columns for the original values with a line for cumulative percentage, making it easy to identify the few categories that contribute most to the total.

Overview

To visualize data as a pareto chart, set the type property to Pareto within the ChartSeries component.

Pareto customization

You can customize the Pareto line to enhance clarity and improve visual distinction.

Pareto Line

Use the fill, width, and dashArray properties in the ChartParetoOptions component to customize the Pareto line for better visual clarity.

The fill property applies a custom color to the line.
The width property controls its thickness.
The dashArray property defines the pattern of dashes and gaps.

By default, the line uses a theme-based color, a standard width, and a solid style.

Line Marker

Use the marker property in the ChartParetoOptions component to display and customize markers for individual points on the pareto line.

Secondary Axis

Use the showAxis property in the ChartParetoOptions component to display or hide the secondary axis for the Pareto series. By default, showAxis is set to true.