COMPONENT probability-chart
Probability Chart
Polymarket-style multi-line step-function probability chart for multi-outcome question markets (3+ outcomes). NOT for binary markets — use ProbabilityBar instead. Feed with useProbabilityHistory(questionMarkets) which returns { series }. Key props: series (OutcomeSeries[]), height? (default 220), theme? ('dark'|'light'). Each outcome auto-assigned a color from OUTCOME_COLORS palette, overridable per series.
Install
$
npx shadcn@latest add https://ui.purrdict.xyz/r/probability-chart.json Preview
Akami42%
Canned Tuna28%
Otoro18%
Other12%
Usage
import { ProbabilityChart } from "@/components/hip4/probability-chart"
import { useProbabilityHistory } from "@/hooks/hip4/use-probability-history"
// Multi-outcome question market (3+ outcomes)
function QuestionChart({ markets }: { markets: Market[] }) {
const { series, isLoading } = useProbabilityHistory(markets)
if (isLoading) return <Skeleton />
return (
<ProbabilityChart
series={series}
height={220}
/>
)
}Props
| Prop | Type | Description |
|---|---|---|
series | OutcomeSeries[] | Array of { id, label, color?, data, currentValue } |
height | number | Chart height in px. Default: 220 |
theme | "light" | "dark" | Color scheme. Default: "dark" |
Dependencies
Registry components