Factory for Good

Dot Chart

SVG scatter plot on log-scale X (people reached) × linear Y (depth of impact) axes, used on the organization detail page.

DepthIntensity of impact per person0246810101001K10K100K1M10M100M1BPeople Reached

Installation

pnpm dlx shadcn@latest add @ffg/dot-chart

Usage

import { DotChart } from "@/components/ui/dot-chart"

<DotChart peopleReached={120} depth={1.8} />

peopleReached is plotted on a log scale from 10 to 1 billion; depth is linear from 0–10. Grid lines and axis text use --foreground / --muted-foreground / --border tokens for dark-mode awareness.

Cause Row

FFG-native reorderable cause row — drag handle, category icon, label, and an expandable description.

Dynamic Action

FFG-native allocation carousel — step through annual-giving amounts or type a custom value, with a confirm action that fires a toast.

On this page

InstallationUsage