パレート図ParetoChartExperimental

Pareto chart: descending value bars (HTML/CSS, left value axis) overlaid with a cumulative-% line (SVG) on a right 0–100% axis and a 'vital few' threshold line (80% by default), with focusable points and an accessible per-category summary. For defect / downtime / cause analysis and any 'which few drive most of the total' breakdown.

142分

96分

64分

38分

22分

11分

チョコ停段取替え故障材料待ち品質調整その他

停止時間（分）累計80%

チョコ停

段取替え

故障

材料待ち

品質調整

その他

Props

表は横にスクロールできます

プロパティ	型	初期値	説明
data	{ label?: ReactNode; value: number; color?: ChartColor }[]	-	Categories with their count / minutes / cost. Sorted descending by default.
threshold	number \| null	80	Cumulative-axis reference line in percent — the Pareto 'vital few' cutoff. null hides it.
thresholdLabel	ReactNode	-	Label for the threshold line. Defaults to "<threshold>%".
sort	boolean	true	Sort the data descending by value before plotting (the Pareto convention). false keeps the given order.
formatValue	(value: number) => ReactNode	-	Format the bar values (counts / minutes).
formatPercent	(percent: number) => ReactNode	n%	Format the cumulative percentage.
showValues	boolean	false	Render the value above each bar.
showLegend	boolean	true	Show the bars / cumulative / threshold legend.
cumulativeLabel	ReactNode	"Cumulative"	Legend / tooltip label for the cumulative line.
label	ReactNode	-	Accessible name for the chart (also the bars' legend label).
className	string	-	Additional CSS class names.

Usage

import { ParetoChart } from "@gunjo/ui"

// descending bars + cumulative-% line + 80% "vital few" threshold
<ParetoChart
  label="停止時間（分）"
  cumulativeLabel="累計"
  threshold={80}
  formatValue={(v) => `${v}分`}
  showValues
  data={[
    { label: "チョコ停", value: 142 },
    { label: "段取替え", value: 96 },
    { label: "故障", value: 64, color: "destructive" },
    { label: "材料待ち", value: 38 },
    { label: "品質調整", value: 22 },
    { label: "その他", value: 11, color: "muted" },
  ]}
/>

パレート図ParetoChartExperimental

プレビュー

Props

Usage