VennChart

data is one row per combination: which sets it's about, and how many things are in it. A single-set row is that set's whole total, overlaps included — so Email is all 4,200 people, 1,100 of whom also get push.

setsKey sets which field lists a row's sets. An array for a combination, or a bare name for a single set.

valueKey sets which field holds the number. Every circle's area is that number, which is what makes the picture readable as a measurement rather than a diagram.

ariaLabel is required, and the place to put the finding. A Venn is read for one thing — how much of one set the other takes — and the geometry never says it out loud.

ariaDescription is the detail the label shouldn't carry.

exclusive switches how a row's number is read. Both charts below are the same data: on the left each row is a set's total, on the right each row is the count in only that region — the shape a GROUP BY over set membership returns.

colors pins a paint per set, matched to the order the sets first appear in data.

fillOpacity is how solid each circle is. The overlaps are those fills stacking up, so it's also how strongly a shared region reads — past about 0.5 three circles blend into one dark mass.

strokeWidth is the outline, which is what keeps each set's own edge findable through the fills. Zero drops it and leaves the blend to do all the work.

labels writes each set's name inside the part of it no other set reaches. Turn it off when the names are longer than the regions have room for and let the legend carry them instead.

values writes each row's number in its own region. Off leaves the areas to speak for themselves, with the exact figures in the tooltip.

valueFormat formats every number the chart shows. A label wider than its own region is dropped rather than drawn across an arc, so a long format quietly thins out the small regions.

tooltip shows the panel on hover: the focused sets with their totals, and the size of the overlap itself set off below them.

animate is on by default: the circles grow out of their centres on the first draw and ease to their new sizes and positions. Roll new values to compare it with the chart on the right, which has it off. Only the marks move — axes, tooltips and labels always read the real numbers — and a reader who has asked their system for reduced motion gets no motion either way.

legend is off by default, because labels already names each circle in place — which needs no matching of swatch to shape. It's the fallback when the names don't fit.

legendPosition sets where the legend sits relative to the plot.

legendAlign places the key horizontally. Centre reads well under a diagram that's itself centred in its box.

legendOrientation flows the entries in a row or a column.

legendGroup names a group that a standalone UiChartLegend with the same group belongs to, so the legend can sit anywhere — here above the plot — and still dim the other circles while you hover an entry. The chart hands the legend its entries, colors included, so it needs no items. Switch the chart's own legend off if you don't want two.

height is the plot's height in pixels; the diagram is scaled to fit inside it. It's ignored once aspectRatio is set.

aspectRatio sizes the chart from its container's width instead of a fixed height.

loading is a skeleton at the chart's exact height; an empty data array gets the empty state instead.

Two sets with no row between them are drawn just apart rather than made to touch. That's the honest picture, and it's worth showing: “these two audiences don't overlap at all” is a finding, not an empty chart.

Three circles is the limit of the shape, not of the component. Four can't draw all fifteen of their regions at any sizes, so the layout below is the closest compromise it can find — several of the overlaps it shows are wrong by construction. Rank the combinations as bars instead.