Charts - Bubble Examples
Bubble chart examples using `sizeField` encoding, logarithmic axes, quadrant annotations, and custom legend and tooltip rendering.
#Usage
import { ChartAnnotation, ChartReferenceLine, ChartScatter, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';<ChartSvg>
<ChartScatter :data="data" value-x-field="growth" value-y-field="share" size-field="revenue" name="Portfolio" />
<ChartXAxis />
<ChartYAxis />
<ChartReferenceLine :x="0" />
<ChartTooltip snap="xy" />
</ChartSvg>Use bubble charts when a third numeric measure belongs directly on each point. Keep bubble sizing readable and explain the size metric in the tooltip or legend.
#Microsoft Product Portfolio: BCG Growth-Share Matrix, FY2023
sizeField maps FY2023 segment revenue to bubble area so Azure's $80B footprint reads immediately against smaller segments. A ChartAnnotation with placement="beforeData" fills four quadrant regions with tinted backgrounds and two ChartReferenceLines draw the dividers, all before the data renders. The custom legend renders a card per quadrant with a revenue aggregate; the custom tooltip stamps a colored quadrant chip and lists relative share, growth, and revenue.
#OECD Healthcare: Spend vs Outcome, 2022
Bubble area encodes population so large-country circles read differently from small-country ones at the same X/Y position. Two ChartReferenceLines divide the plot at OECD average spend and life expectancy; ChartAnnotation highlights the US as the highest-spend, below-average-life-expectancy outlier. The custom tooltip surfaces each country's spend rank across all 31 nations and its deviation from the OECD average.
#Blockbuster ROI: Production Budget × Worldwide Gross, 2011–2023
ChartXAxis type="logarithmic" and ChartYAxis type="logarithmic" collapse the data so ROI thresholds appear as straight diagonals regardless of scale. A ChartAnnotation with placement="beforeData" fills the profitable band and draws three ROI reference diagonals before any data renders; a second ChartAnnotation spotlights three notable outliers. tickFormat on both axes doubles as the tooltip number formatter, turning raw values into $2.8B without a custom render callback.