Quadrant chart

Compare observations across four decision regions.

Chart ID: quadrant. Independent import: @revolist/charts/quadrant.

Live example

Loading chart…

Reading the chart

Compare numeric X/Y positions against an authored split point. Region color indicates which side of each split a point occupies; it does not calculate a business score.

Data requirements

Bind numeric X and Y series explicitly. Bubble marks also require a non-negative size series. Channels reference stable series IDs, not labels. Parallel channel arrays can describe independent scatter/bubble groups.

The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.

Data role	Field count
category	1 or more
x	1 or more
y	1 or more

Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.

Create this chart

Install the package using the installation guide, give the host an explicit height, and call createQuadrantChart after the host mounts. This factory fixes the chart type to quadrant.

<div id="chart" style="width: 100%; height: 450px;"></div>

Complete runnable TypeScript example with sample data

import { createQuadrantChart } from '@revolist/charts/quadrant';

const container = document.getElementById('chart')!;
const chart = await createQuadrantChart({
  container,
  "data": [
    {
      "id": "Product A",
      "cost": -4,
      "revenue": 6
    },
    {
      "id": "Product B",
      "cost": 7,
      "revenue": 8
    },
    {
      "id": "Product C",
      "cost": -6,
      "revenue": -3
    },
    {
      "id": "Product D",
      "cost": 5,
      "revenue": -5
    },
    {
      "id": "Product E",
      "cost": 2,
      "revenue": 4
    }
  ],
  "mapping": {
    "category": {
      "field": "id"
    },
    "series": [
      {
        "field": "cost",
        "label": "Investment"
      },
      {
        "field": "revenue",
        "label": "Return"
      }
    ]
  },
  "bindings": {
    "x": [
      "cost"
    ],
    "y": [
      "revenue"
    ]
  },
  "axes": {
    "x": {
      "scale": "linear",
      "min": -10,
      "max": 10
    },
    "y": {
      "scale": "linear",
      "min": -8,
      "max": 10
    }
  },
  "presentation": {
    "dataLabels": true
  }
});

// When the host unmounts:
// chart.destroy();

Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.

Supported options

Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.

Option	Default	Accepted values
showGridLines	true	true or false
markOpacity	1	0.2 to 1; step 0.05
pivotX	0	-1000000 to 1000000; step 0.1
pivotY	0	-1000000 to 1000000; step 0.1

Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.

Related charts

• Scatter — Compare two measures as points across categories.
• Bubble — Compare two measures while bubble area represents a third measure.
• Density scatter — Aggregate dense X/Y observations into spatial density.
• Connected scatter — Show the ordered path between paired X/Y observations.

Charts overview · Installation · Data & Configuration