PointCategoryChart#

The PointCategoryChart component displays categorized points on a 2D plane, allowing for flexible visual encoding using color, symbol type, or symbol size. It is ideal for representing multi-category scatter plots, surveys, or segmented data comparisons.

Usage Example#

1<PointCategoryChart
2  representsDataUsing="foregroundStyle"
3  marks={[
4    { category: "Apple", x: 10, y: 42 },
5    { category: "Apple", x: 20, y: 37 },
6    { category: "Orange", x: 30, y: 62 },
7    ...
8  ]}
9/>

Props#

marks: Array<object> (required)#

Each mark defines a data point on the chart and must include:

• x: number The value on the horizontal axis (e.g., age, time, score).

• y: number The value on the vertical axis (e.g., quantity, percentage).

• category: string A grouping key. Each category may be visually differentiated using color, symbol, or size.

• Additional optional properties from ChartMarkProps can be used for further customization:

  • foregroundStyle
  • symbol
  • symbolSize
  • annotation
  • opacity, etc.

representsDataUsing?: "foregroundStyle" | "symbol" | "symbolSize"#

Controls how the chart visually distinguishes different categories:

• "foregroundStyle" – uses different colors per category.
• "symbol" – uses different shapes (e.g., circles, squares) per category.
• "symbolSize" – varies the size of symbols based on the category (or data magnitude).

This is an alternative to setting foregroundStyleBy, symbolBy, or symbolSizeBy manually.

Full Example#

1const favoriteFruitsData = [
2  { fruit: "Apple", age: 10, count: 42 },
3  { fruit: "Apple", age: 20, count: 37 },
4  ...
5]
6
7<PointCategoryChart
8  representsDataUsing="symbol"
9  marks={favoriteFruitsData.map(item => ({
10    category: item.fruit,
11    x: item.age,
12    y: item.count,
13  }))}
14/>

You can dynamically switch how data is represented using a <Picker> and bind it to the representsDataUsing prop.

Use Cases#

PointCategoryChart is suitable for:

• Comparing multiple categories over time or value ranges
• Visualizing multivariate distributions
• Highlighting categorical distinctions within scatter plots