Pareto Chart

Highlight the small number of categories that drive the majority of impact with a bar plus cumulative line visualization.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁴⁾

Properties

⁽⁵⁵⁾

Playground

Simple Pareto chart showing how cumulative contribution highlights the dominant defect categories.

Loading demo…

import
 
{
 
ParetoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 DEFECT_BREAKDOWN 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ParetoChart
      
title
=
"Monthly defect analysis"
      
subtitle
=
"Product QA triage"
      
height
=
{
420
}
      
data
=
{
DEFECT_BREAKDOWN
}
      
valueSeriesLabel
=
"Defects"
      
cumulativeSeriesLabel
=
"Cumulative impact"
      
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dotted'
 
}
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'bottom'
 
}
}
      
yAxis
=
{
{
 title
:
 
'Defects reported'
 
}
}
      
yAxisRight
=
{
{
 title
:
 
'Cumulative share'
 
}
}
    
/>
  
)
;
}

Highlight how a handful of ticket categories drive the majority of support backlog volume.

Loading demo…

import
 
{
 
ParetoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 SUPPORT_CASES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ParetoChart
      
title
=
"Support backlog concentration"
      
subtitle
=
"Top ten case drivers this quarter"
      
height
=
{
440
}
      
data
=
{
SUPPORT_CASES
}
      
valueSeriesLabel
=
"Cases"
      
cumulativeSeriesLabel
=
"Cumulative ticket share"
      
yAxis
=
{
{
 title
:
 
'Case volume'
 
}
}
      
yAxisRight
=
{
{
 title
:
 
'Cumulative share'
 
}
}
    
/>
  
)
;
}

Root-cause analysis illustrating which failure modes dominate incident volume.

Loading demo…

import
 
{
 
ParetoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 POSTMORTEM_CAUSES 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ParetoChart
      
title
=
"Incident root causes"
      
subtitle
=
"Rolling twelve months"
      
height
=
{
420
}
      
data
=
{
POSTMORTEM_CAUSES
}
      
valueSeriesLabel
=
"Incidents"
      
cumulativeSeriesLabel
=
"Cumulative impact"
      
sortDirection
=
"none"
      
categoryLabelFormatter
=
{
(
label
)
 
=>
 label
.
replace
(
' '
,
 
'\n'
)
}
      
legend
=
{
{
 show
:
 
true
,
 position
:
 
'right'
 
}
}
    
/>
  
)
;
}

Examine how a few strategic accounts make up the bulk of recurring revenue.

Loading demo…

import
 
{
 
ParetoChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 ACCOUNT_REVENUE 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ParetoChart
      
title
=
"Annual revenue concentration"
      
subtitle
=
"Top enterprise accounts"
      
height
=
{
460
}
      
data
=
{
ACCOUNT_REVENUE
}
      
valueSeriesLabel
=
"ARR"
      
cumulativeSeriesLabel
=
"Cumulative revenue"
      
lineColor
=
"#F97316"
      
yAxis
=
{
{
        title
:
 
'Recurring revenue'
,
        labelFormatter
:
 
(
value
)
 
=>
 
`$${(value / 1_000_000).toFixed(1)}M`
,
      
}
}
      
yAxisRight
=
{
{
        title
:
 
'Revenue share'
,
      
}
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/ParetoChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap