Documentation

axes: {
  x: {
    position: 'bottom',
    format: { type: 'datetime', dateStyle: 'medium', timeStyle: 'short', timeZone: 'Asia/Seoul' },
    labels: {
      orientation: 'vertical-up', padding: 10,
      font: { family: 'Inter', size: 11, weight: 'semibold' }
    },
    ticks: { count: 6, spacing: 48 }
  },
  y: { grid: { visible: true, dash: [4, 4], opacity: 0.7 } }
}

legend

Explain the series and scale represented by each color, line, or symbol inside the chart.

highlights[]

Emphasize a datum, value set, axis interval, or plot region without changing source values.

annotations[] · placement: 'auto' · style.maxWidth

Attach user-authored safe text to a datum, axis range, or normalized plot position. Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

interaction.playback.transition

Playback smoothly interpolates matching stable keys for 600 ms with ease-in-out. Entering or exiting marks fade, incompatible shapes crossfade, and reduced-motion jumps directly to the final state.

interaction.selection

Click a mark to select it, press Escape to clear it, and consume selection state and events in the host application.

legend: { mode: 'categories', field: 'series', position: 'bottom' },
highlights: [
  { id: 'focus', target: { type: 'datum', field: 'city', value: 'Seoul' } },
  { id: 'quarter', target: { type: 'range', x: { from: 'Apr', to: 'Jun' } } }
],
annotations: [{
  id: 'note',
  target: { type: 'datum', rowIndex: 3 },
  text: 'Campaign started', detail: 'User-authored plain text',
  placement: 'auto', style: { maxWidth: 220 }
}],
interaction: {
  controls: { annotations: true },
  playback: {
    field: 'period', key: 'period', mode: 'cumulative',
    transition: { duration: 600, easing: 'ease-in-out' }
  },
  selection: {
    mode: 'multiple', toggle: true,
    clearOnBackground: true, clearOnEscape: true
  }
}

axes.x / axes.y

This example uses external Cartesian x/y axes, and the options below are applied to the live chart.

axes.x2 / axes.y2

This example binds differently scaled layers to the primary y axis on the left and an independent y2 axis on the right.

AxisSpec | false

position · offset · line · ticks · labels · grid · title · format

legacy aliases

tickCount · format: string · labelAngle · grid: boolean · title: string

axes: {
  y: {
    position: 'left',
    format: { type: 'currency', currency: 'KRW', notation: 'compact' }
  },
  y2: {
    position: 'right', offset: 8, grid: false,
    format: { type: 'percent', fractionDigits: 1 }
  }
},
layers: [
  { mark: { type: 'bar' }, x: { field: 'period', axisId: 'x' }, y: { field: 'revenue', axisId: 'y' } },
  { mark: { type: 'line', point: true }, x: { field: 'period', axisId: 'x' }, y: { field: 'marginRate', axisId: 'y2' } }
]

getLegendState() · setLegendItemVisible() · resetLegend()

Explain the series and scale represented by each color, line, or symbol inside the chart.

getAnnotations() · setAnnotations() · addAnnotation() · updateAnnotation() · removeAnnotation()

Attach user-authored safe text to a datum, axis range, or normalized plot position.

getAnnotationsVisible() · setAnnotationsVisible() · toggleAnnotations()

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

interaction.playback.key · transition

Playback smoothly interpolates matching stable keys for 600 ms with ease-in-out. Entering or exiting marks fade, incompatible shapes crossfade, and reduced-motion jumps directly to the final state.

getSelection() · setSelection() · clearSelection()

Click a mark to select it, press Escape to clear it, and consume selection state and events in the host application.

getAnalyticSelection() · applyAnalyticSelection() · clearAnalyticSelection()

Serializable point, interval, rectangle, axis and lasso selection state.

domainToPixel() · pixelToDomain() · zoomDomainBy() · panDomainBy() · resetDomainView()

Resolved-scale round-trip and continuous Cartesian domain navigation.

getSemanticIndex() · toAccessibleRows() · getAccessibilityState()

Bounded semantic sidecar, native table rows and accessibility mirror state.

legendchange · annotationchange · annotationvisibilitychange · selectionchange · analyticselectionchange · domainviewchange

Safe events

chart.on('selectionchange', ({ state }) => {
  console.log(state.items);
});

const noteId = chart.addAnnotation({
  target: { type: 'datum', rowIndex: 3 },
  text: 'Reviewed by the analyst',
  placement: 'auto'
});
chart.updateAnnotation(noteId, { placement: 'auto' });
chart.toggleAnnotations();

const legendItem = chart.getLegendState().items.find(item => item.toggleable);
if (legendItem) chart.setLegendItemVisible(legendItem.id, false);
chart.clearSelection();