Charts - Scatter Examples

#Usage

import { ChartCanvas, ChartDecimation, ChartNavigator, ChartReferenceLine, ChartScatter, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';

<ChartSvg>
    <ChartScatter :data="data" value-x-field="revenue" value-y-field="margin" name="Software" />
    <ChartXAxis />
    <ChartYAxis />
    <ChartTooltip snap="xy" />
    <ChartZoom mode="xy" />
</ChartSvg>

Use scatter charts for relationships, clusters, and outliers. Switch to ChartCanvas and add ChartDecimation when the point cloud is large enough that SVG mark count becomes the bottleneck.

#US Tech Profitability: Fortune 100 by Sub-Industry, FY2023

Four ChartScatter series group 20 tech companies by sub-industry on revenue × net margin axes. ChartReferenceBand shades the high-margin zone in green; ChartReferenceLine marks the industry average with a pill-style label. The custom legend renders a leaderboard card per sub-industry; the custom tooltip surfaces each company's revenue, margin, and delta against that average.

#NBA 2023-24: Scorers vs Playmakers, by Position

Five ChartScatter series assign a distinct marker shape per position: circle for PG, square for SG, triangle for SF, cross for PF, and star for C. Shapes keep position clusters visually separable even when ChartLegend items are toggled. ChartAnnotation paints a soft ring and callout pill around three statistical outliers: the assists leader, the scoring leader, and a positional anomaly.

#Moore's Law: Transistor Count per Microprocessor, 1971–2024

ChartYAxis type="logarithmic" flattens an eight-order-of-magnitude span into a legible diagonal; the tickFormat callback propagates to the default ChartTooltip, so hovering shows compact suffixes without a custom render callback. A ChartAnnotation with placement="beforeData" draws the theoretical projection as a dashed line behind the data; a second ChartAnnotation spotlights five barrier-crossing chips. ChartZoom mode="x" and ChartNavigator let users focus on specific decades without losing global context.

#Wind Farm Telemetry: 100,000 Readings, Decimated

ChartDecimation algorithm="lttb" downsamples 100,000 turbine readings to ~2,000 representative points before rendering. Drag the X axis to zoom: decimation re-samples within the visible range, so clusters hidden at the wide view re-emerge on focus. The same source data drives SVG and Canvas; decimation preserves the power-curve shape, not every original row.

#100,000 Points · Canvas + Boost Mode

The boost prop activates automatically above 50,000 visible points, disabling per-point hover halos, opt-in hover dimming, and the per-point allocation loop. Above 2,000 points, hover hit-testing builds a quadtree on first mousemove, dropping lookup from O(n) to O(log n). Canvas-only: rendering 100,000 DOM nodes is impractical for SVG.

#Related Docs

• Scatter & Bubble Overview
• Tooltip
• Legend
• Reference Lines & Bands