Skip to content
Get Pro
Comparison

Pareto

Causes sorted largest first as bars, with the cumulative share as a line on a 0 to 100% axis.

$149 once · every Pro piece

Customize

A dashed reference marks the cutoff, 80% by default, and where the line crosses it a hot ring lands with a quiet dashed drop to the axis and a badge reading how many causes it takes. Bars past the crossing are ghosted, hatched and dim: the trivial many. Point at a bar or step with the arrow keys (Shift jumps to the crossing): the rest step back, a dot rides the cumulative line and a panel reads count, share and cumulative share.

Install

npx shadcn@latest add @obsyde/pareto

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Pareto } from '@/components/obsyde/ember/pareto/Pareto';

export function Example() {
  return (
    <Pareto />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/pareto/Pareto.tsxcomponent
  • ember/pareto/pareto.cssstyles
  • ember/pareto/ParetoDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
cutoffCutoff %number80
ghostGhost the restbooleantrue
categoriesCategoriesnumber10
legendLegend'row' | 'none''row'
tooltipTooltip'panel' | 'none''panel'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''diagonal-up'
backgroundBackground'grid' | 'dots' | 'none''grid'
curveCurve'linear' | 'monotone' | 'step''linear'
statusStatus'ready' | 'loading' | 'empty''ready'
valueLabelsValue labelsbooleanfalse
heightHeightnumber280
seedSeednumber5