Charts — Quadrant Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/charts/quadrant-chart

Quadrant Chart

charts

import { QuadrantChart } from "semiotic"

Wraps: StreamXYFrame

Related: Scatterplot·Bubble Chart

A scatterplot divided into four labeled, colored quadrants by center lines. Use it for BCG growth-share matrices, priority/effort grids, risk matrices, or any 2D categorization where the quadrant a point falls in carries meaning.

Quick Start

import { QuadrantChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { product: "TurboEncabulator 9000", growth: 0.82, share: 0.75, revenue: 120, category: "Stars" }, { product: "Cromulent Pipe Fittings", growth: 0.22, share: 0.85, revenue: 200, category: "Cash Cows" }, { product: "Blockchain Dog Walker", growth: 0.95, share: 0.12, revenue: 55, category: "Question Marks" }, { product: "Artisanal Fax Machine", growth: 0.08, share: 0.15, revenue: 15, category: "Dogs" }, // ... 10 items total ], /* --- Layout --- */ xCenter: 0.5, yCenter: 0.5, /* --- Process --- */ xAccessor: "share", yAccessor: "growth", /* --- Customize --- */ title: "BCG Growth-Share Matrix", xLabel: "Relative Market Share", yLabel: "Market Growth Rate", colorBy: "category", colorScheme: ["#4CAF50","#2196F3", ... ], sizeBy: "revenue", sizeRange: [5,30], showLegend: true, quadrants: { topLeft: { label: "Question Marks", color: "#FF9800" }, topRight: { label: "Stars", color: "#4CAF50" }, bottomLeft: { label: "Dogs", color: "#F44336" }, bottomRight: { label: "Cash Cows", color: "#2196F3" }, }, /* --- Interact --- */ tooltip: true } export default () => { return <QuadrantChart {...frameProps} /> }

Examples

Priority Matrix

An Eisenhower-style effort/impact grid. Both axes use a 0–1 unitized scale with the center lines at 0.5, giving each quadrant equal area and making it easy to see which quadrant a task falls in at a glance.

import { QuadrantChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { task: "Fix the login bug from 2019", effort: 0.15, impact: 0.95 }, { task: "Rewrite everything in Rust", effort: 0.85, impact: 0.90 }, { task: "Dark mode (the sequel)", effort: 0.35, impact: 0.48 }, // ... 10 items total ], /* --- Layout --- */ xCenter: 0.5, yCenter: 0.5, /* --- Process --- */ xAccessor: "effort", yAccessor: "impact", /* --- Customize --- */ xLabel: "Effort", yLabel: "Impact", pointRadius: 7, quadrants: { topLeft: { label: "Quick Wins", color: "#4CAF50" }, topRight: { label: "Major Projects", color: "#FF9800" }, bottomLeft: { label: "Fill-ins", color: "#9E9E9E" }, bottomRight: { label: "Thankless Tasks", color: "#F44336" }, }, /* --- Interact --- */ tooltip: true } export default () => { return <QuadrantChart {...frameProps} /> }

Asymmetric Quadrants

Quadrants don't have to be evenly sized. HerexCenter and yCenter are set to 6.0 on a 0–10 scale, pushing the center lines off-center so the "Critical" quadrant (high likelihoodand high severity) is intentionally smaller — reflecting that truly critical risks should be rare. The per-quadrant opacity is also varied to draw the eye toward the danger zone.

import { QuadrantChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { item: "Deploying on Friday afternoon", likelihood: 8.5, severity: 9.2 }, { item: "Intern refactoring auth", likelihood: 2.0, severity: 9.5 }, { item: "That one flaky test", likelihood: 9.5, severity: 1.0 }, // ... 10 items total ], /* --- Layout --- */ xCenter: 6.0, yCenter: 6.0, /* --- Process --- */ xAccessor: "likelihood", yAccessor: "severity", /* --- Customize --- */ centerlineStyle: { stroke: "#666", strokeWidth: 2, strokeDasharray: [6, 4] }, xLabel: "Likelihood", yLabel: "Severity", pointRadius: 7, quadrants: { topLeft: { label: "Low Likelihood / High Impact", color: "#9C27B0", opacity: 0.10 }, topRight: { label: "Critical", color: "#F44336", opacity: 0.12 }, bottomLeft: { label: "Negligible", color: "#9E9E9E", opacity: 0.06 }, bottomRight: { label: "Annoying but Survivable", color: "#FF9800", opacity: 0.08 }, }, /* --- Interact --- */ tooltip: true } export default () => { return <QuadrantChart {...frameProps} /> }

Props

Prop	Type	Required	Default	Description
`data`	array	—	—	Array of data points. Omit when using push API.
`xAccessor`	string \| function	—	`"x"`	Field name or function to access x values.
`yAccessor`	string \| function	—	`"y"`	Field name or function to access y values.
`quadrants`	QuadrantsConfigOverride	—	`built-in quadrant labels and colors`	Optional overrides for the four quadrants: { topRight, topLeft, bottomRight, bottomLeft }. Each provided quadrant can include label, color, and opacity.
`xCenter`	number	—	`midpoint of x domain`	X-coordinate of the vertical center line in data units.
`yCenter`	number	—	`midpoint of y domain`	Y-coordinate of the horizontal center line in data units.
`centerlineStyle`	object	—	`{ stroke: "#999", strokeWidth: 1 }`	Style for center lines: { stroke, strokeWidth, strokeDasharray }.
`showQuadrantLabels`	boolean	—	`true`	Show quadrant labels in the corners.
`quadrantLabelSize`	number	—	`12`	Font size for quadrant labels.
`colorBy`	string \| function	—	—	Field name or function to determine point color.
`colorScheme`	string \| array	—	`"category10"`	Color scheme name or custom colors array.
`sizeBy`	string \| function	—	—	Field name or function to determine point size.
`sizeRange`	[number, number]	—	`[3, 15]`	Min and max radius for points when sizeBy is specified.
`pointRadius`	number	—	`5`	Default point radius.
`pointOpacity`	number	—	`0.8`	Opacity of the points.
`enableHover`	boolean	—	`true`	Enable hover tooltips.
`showGrid`	boolean	—	`false`	Show background grid lines.
`showLegend`	boolean	—	`true (when colorBy)`	Show a legend.
`tooltip`	boolean \| object \| function	—	—	Enable/disable default tooltip (boolean), or provide a config object or render function.
`width`	number	—	`600`	Chart width in pixels.
`height`	number	—	`400`	Chart height in pixels.
`margin`	object	—	`auto`	Margin around the chart area.
`xLabel`	string	—	—	Label for the x-axis.
`yLabel`	string	—	—	Label for the y-axis.
`title`	string	—	—	Chart title.
`frameProps`	object	—	—	Additional StreamXYFrame props for advanced customization.

Graduating to the Frame

QuadrantChart uses canvasPreRenderers to draw quadrant fills and labels on the canvas layer under the scatter points. You can achieve the same result directly on StreamXYFrame:

JSX

// HOC (simple) <QuadrantChart data={data} xAccessor="x" yAccessor="y" xCenter={0.5} yCenter={0.5} quadrants={{ topRight: { label: "High", color: "green" }, topLeft: { label: "Risky", color: "orange" }, bottomRight: { label: "Stable", color: "blue" }, bottomLeft: { label: "Low", color: "red" }, }} /> // Frame (full control) <StreamXYFrame chartType="scatter" data={data} xAccessor="x" yAccessor="y" size={[600, 400]} canvasPreRenderers={[ (ctx, nodes, scales, layout) => { const cx = scales.x(0.5) const cy = scales.y(0.5) // Draw quadrant fills ctx.fillStyle = "green" ctx.globalAlpha = 0.08 ctx.fillRect(cx, 0, layout.width - cx, cy) // ... other quadrants, center lines, labels ctx.globalAlpha = 1 } ]} />

Scatterplot — basic two-variable plot
Bubble Chart — size-encoded scatterplot
Heatmap — binned 2D distribution
StreamXYFrame — full control with canvasPreRenderers