ChartMarkProps#

ChartMarkProps defines a set of visual and behavioral modifiers applicable to individual chart marks such as bars, lines, or areas. These modifiers allow developers to customize the appearance, layout, and dynamic behavior of chart elements in BarChart, LineChart, AreaChart, and other mark-based components.

1. Style Modifiers#

foregroundStyle#

Specifies the fill style of the chart content.

• Type: ShapeStyle | DynamicShapeStyle

• Example:

  1foregroundStyle: "systemGreen"

opacity#

Sets the opacity of the mark, ranging from 0.0 (fully transparent) to 1.0 (fully opaque).

• Type: number

• Example:

  1opacity: 0.6

cornerRadius#

Sets the corner radius for shapes such as bars or capsules.

• Type: number

• Example:

  1cornerRadius: 8

lineStyle#

Applies stroke styles for line marks.

• Type: StrokeStyle

• Structure:

  1{
  2  lineWidth?: number
  3  lineCap?: 'butt' | 'round' | 'square'
  4  lineJoin?: 'bevel' | 'miter' | 'round'
  5  mitterLimit?: number
  6  dash?: number[]
  7  dashPhase?: number
  8}

• Example:

  1lineStyle: {
  2  lineWidth: 2,
  3  lineCap: "round",
  4  dash: [4, 2]
  5}

interpolationMethod#

Controls how lines or areas interpolate between data points.

• Type: ChartInterpolationMethod

• Options: "cardinal", "catmullRom", "linear", "monotone", "stepCenter", "stepEnd", "stepStart"

• Example:

  1interpolationMethod: "catmullRom"

alignsMarkStylesWithPlotArea#

Determines whether styles align with the chart’s plot area.

• Type: boolean

• Example:

  1alignsMarkStylesWithPlotArea: true

2. Symbol Configuration (for Line/Scatter Charts)#

symbol#

Sets a symbol type or a custom view as the plotting symbol.

• Type: ChartSymbolShape | VirtualNode

• Options: "circle", "square", "triangle", "diamond", "cross", "plus", "asterisk", "pentagon"

• Example:

  1symbol: "triangle"

symbolSize#

Controls the symbol’s size.

• Type: number | { width: number; height: number }

• Example:

  1symbolSize: 18
  2// or
  3symbolSize: { width: 16, height: 16 }

3. Annotations#

annotation#

Adds an annotation view positioned relative to a mark.

• Type: VirtualNode | { position?, alignment?, spacing?, overflowResolution?, content }

• Structure:

  1{
  2  position?: AnnotationPosition
  3  alignment?: Alignment
  4  spacing?: number
  5  overflowResolution?: {
  6    x?: AnnotationOverflowResolutionStrategy
  7    y?: AnnotationOverflowResolutionStrategy
  8  }
  9  content: VirtualNode
  10}

• Example:

  1annotation: {
  2  position: "top",
  3  alignment: "center",
  4  spacing: 4,
  5  overflowResolution: {
  6    x: "fit",
  7    y: "padScale"
  8  },
  9  content: <Text>Label</Text>
  10}

AnnotationPosition#

Defines where the annotation is placed relative to the mark.

• Type: string

• Values:

  • "automatic"
  • "top", "topLeading", "topTrailing"
  • "bottom", "bottomLeading", "bottomTrailing"
  • "leading", "trailing"
  • "overlay" (overlay the mark itself)

AnnotationOverflowResolutionStrategy#

Specifies how to handle annotation layout overflow.

• Type: string

• Values:

  • "automatic": Selects the best resolution strategy automatically
  • "fit": Adjusts the annotation to stay within the boundary
  • "fitToPlot": Fits annotation within the plot area
  • "fitToChart": Fits within the full chart bounds
  • "fitToAutomatic": Automatically chooses between chart and plot bounds
  • "padScale": Extends the chart scale to fit the annotation
  • "disabled": Disables overflow resolution (allows clipping)

4. Shape Effects#

clipShape#

Applies a clipping shape to the mark.

• Type: 'rect' | 'circle' | 'capsule' | 'ellipse' | 'buttonBorder' | 'containerRelative'

• Example:

  1clipShape: "capsule"

shadow#

Adds a drop shadow to the mark.

• Type:

  1{
  2  color?: string // e.g. "systemGray"
  3  radius: number
  4  x?: number
  5  y?: number
  6}

• Example:

  1shadow: {
  2  color: "systemGray",
  3  radius: 5,
  4  x: 2,
  5  y: 2
  6}

blur#

Applies a Gaussian blur effect.

• Type: number

• Example:

  1blur: 6

zIndex#

Controls the rendering order of the mark relative to others.

• Type: number

• Example:

  1zIndex: 2

offset#

Offsets the mark in one or more dimensions.

• Supported formats:

  • { x, y }
  • { x, yStart, yEnd }
  • { xStart, xEnd, y }
  • { xStart, xEnd, yStart, yEnd }

• Example:

  1offset: { x: 10, y: -5 }

5. Dynamic Data Mapping (xxxBy)#

These properties dynamically bind mark appearance or position to data fields. They should not be used in combination with their corresponding static properties (e.g. foregroundStyleBy vs. foregroundStyle).

foregroundStyleBy#

Maps a data field to a foreground style.

• Type: string | number | Date | { value, label }

• Example:

  1foregroundStyleBy: {
  2  value: item.color,
  3  label: "Color"
  4}

lineStyleBy#

Maps a data field to a line style.

• Example:

  1lineStyleBy: {
  2  value: item.pattern,
  3  label: "Line Style"
  4}

positionBy#

Maps a data field to mark position and axis alignment.

• Type:

  1{
  2  value: string | number | Date
  3  label?: string
  4  axis: 'horizontal' | 'vertical'
  5  span?: MarkDimension
  6}

• Example:

  1positionBy: {
  2  value: item.category,
  3  axis: "horizontal",
  4  span: {
  5    type: "ratio",
  6    value: 0.8
  7  }
  8}

MarkDimension#

Controls the spacing or sizing behavior of the mark within its axis.

• Type: "automatic" or an object:

  1{
  2  type: "inset" | "fixed" | "ratio"
  3  value: number
  4}

• Explanation:

  • "automatic": Lets the system determine the size
  • "inset": Shrinks the size by an inset margin
  • "fixed": Fixed screen-space size (in points)
  • "ratio": Relative to available axis spacing (0 to 1)

symbolBy#

Maps a field to different symbol shapes.

• Example:

  1symbolBy: {
  2  value: item.category,
  3  label: "Type"
  4}

symbolSizeBy#

Maps a field to symbol size.

• Example:

  1symbolSizeBy: {
  2  value: item.score,
  3  label: "Score"
  4}

Example: Grouped Bar Chart#

1<BarChart
2  marks={data.map(item => ({
3    label: item.type,
4    value: item.count,
5    positionBy: {
6      value: item.color,
7      axis: "horizontal"
8    },
9    foregroundStyleBy: item.color,
10    cornerRadius: 8
11  }))}
12/>