What data does the Quadrant Scatter – 2 metrics chart need?

A grid on the same page with these columns: Dimension A (required); Metric 1 (required); Metric 2 (required). Your own header names can be mapped with data-columns.

What is the Quadrant Scatter – 2 metrics chart good for?

Use it to compare items on two measures at once and sort them into four groups – high/high winners, and the ones to fix. It answers questions like: Which items are high on both measures? Which are high cost but low value? Are the biggest items in the right quadrant?

Does the Quadrant Scatter – 2 metrics chart send data anywhere?

No. It reads the grid already drawn in the viewer's browser and calculates there. It only downloads its own script and Chart.js, both pinned with an SRI hash.

HTML Charts / Quadrant Scatter – 2 metrics

Free Chart.js chart for HTML containers

Quadrant Scatter – 2 metrics

Items plotted by two metrics, split into quadrants at the averages, without bubble sizing.

v1.1.0Live demo · random data2 metrics1 dimensionRelationshipsComparison

Live demo – the chart is reading the random grid underneath, exactly as it reads a real one

Demo grid · … rows of random valuesIn use this is your grid, tucked behind the chart

When to use it

Use it to compare items on two measures at once and sort them into four groups – high/high winners, and the ones to fix.

Questions it answers

Which items are high on both measures?
Which are high cost but low value?
Are the biggest items in the right quadrant?

How to use it

On your dashboard page, add a grid with the columns below (or map your own header names – see below). Keep it on the same page – tuck it behind the chart rather than hiding it, and make it tall.
Add an HTML container (one that runs JavaScript) and paste the snippet.
View the page. The chart finds the grid, reads every row and draws itself; it updates when filters change the grid.

Default header	Key		What it's for
`Dimension A`	`dimA`	Required	The item.
`Metric 1`	`v1`	Required	Across (x).
`Metric 2`	`v2`	Required	Up (y).

Snippet for the HTML container

<div data-chart-embed="quadrant-scatter" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/quadrant-scatter-1.1.0.js";
  s.integrity = "sha384-74YJOLIslUCZsMGt2byOa+ekuc80Wzjmh6zc+gwtwckPA8E17qocYbuP/2XKJzFB";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>

Script URL: https://viz.kaijxnes.com/charts/quadrant-scatter-1.1.0.js
Integrity (SRI): sha384-74YJOLIslUCZsMGt2byOa+ekuc80Wzjmh6zc+gwtwckPA8E17qocYbuP/2XKJzFB
Chart.js: https://viz.kaijxnes.com/chart.umd-4.4.1.js · sha384-dug+JxfBvklEQdJ4AYuBBAIScUz0bVN73xpy273gcAwHjb3qI0fXmuYNaNfdyYJG

The integrity value pins this exact version: the browser refuses to run the script if a single byte changes. New versions get a new file name and a new snippet, so a dashboard only changes when you paste the new snippet.

Your own column names

The chart looks for the default headers above. If your grid's headers are different, map them by key with data-columns on the placeholder – the chart then shows your names too. data-labels (same keys) changes just the on-screen names, and data-title changes the heading. For grids that draw rows in batches, data-grid-class and data-scroll-class name the grid's container and its scroll box so every row is read.

Example

<div data-chart-embed="quadrant-scatter" data-columns='{"month":"Your Month Header","v2":"Your Metric Header"}' data-title="Your title" style="height:100%"></div>
<script>
(function () {
  var s = document.createElement("script");
  s.src = "https://viz.kaijxnes.com/charts/quadrant-scatter-1.1.0.js";
  s.integrity = "sha384-74YJOLIslUCZsMGt2byOa+ekuc80Wzjmh6zc+gwtwckPA8E17qocYbuP/2XKJzFB";
  s.crossOrigin = "anonymous";
  document.head.appendChild(s);
})();
</script>

What it does

The Quadrant Scatter script without a size metric

Data & security

Reads only what is drawn on the page for the viewer, so the viewer's normal permissions still apply
Calculations happen in the viewer's browser; nothing is uploaded or sent anywhere
The only downloads are this script and Chart.js, both integrity-checked
No logins, API keys, cookies or browser storage

Other versions

This page uses the Quadrant Scatter script – the snippet is the same, only the grid has different columns.

Quadrant Scatter2–3 metrics · 1 dimension Quadrant Scatter – 2 metrics2 metrics · 1 dimension

More charts

Monthly BarsBar + line, Metric toggle, Averages Stacked SegmentsStacked bars, Segments, Filters, Large grids Segment BreakdownStacked bars, Segments, Large grids Cost vs ReturnKPIs, ROI, Cost per unit Month HeatmapHeatmap, Curves, Large grids KPI ScorecardKPI cards, Sparklines, Comparisons Time Series TrioTime series, Scorecards, Date ranges FunnelFunnel, Conversion, Segments Change BridgeWaterfall, Variance, Drivers ParetoRanking, 80/20, Cumulative Target PacingTargets, Projection, Daily Quadrant ScatterScatter, Bubbles, Quadrants Mix ShiftShare, 100% stacked, Trends Calendar HeatmapCalendar, Daily, Weekday patterns Year over YearYoY, Year to date, Seasonality LeaderboardRanking, Table, Sparklines DistributionHistogram, Percentiles, Groups Target AttainmentTargets, Bullet bars, Ranking Anomaly WatchAnomalies, Rolling average, Alerts TreemapTreemap, Hierarchy, Share Small MultiplesSmall multiples, Trends, Segments Variance TableTable, Variance, Month vs month GaugesGauges, Targets, KPIs Combo ChartBar + line, Dual axis, Time series Flow (Sankey)Sankey, Flows, Two dimensions Box PlotBox plot, Spread, Groups Radar CompareRadar, Profiles, Many metrics Bump ChartRanks, Over time, Movers Indexed GrowthGrowth, Index, Over time DumbbellBefore / after, Change, Ranking Correlation MatrixCorrelation, Many metrics, Scatter Time Series StackTime series, Scorecards, Up to 6 metrics Time Series – 1 metricTime series, Scorecard, 1 metric Time Series – 2 metricsTime series, Scorecards, 2 metrics KPI Scorecard – 3 metricsKPI cards, Sparklines, 3 metrics Combo Chart – bar + lineBar + line, Dual axis, 2 metrics Variance Table – 1 metricTable, Variance, 1 metric Funnel – no segmentsFunnel, Conversion, 0 dimensions Treemap – one levelTreemap, Share, 1 dimension Radar Compare – 4 metricsRadar, Profiles, 4 metrics

Made by Kai Jones – data analyst building custom visuals for reporting. See my CV