문서

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

색·선·기호가 나타내는 계열과 척도를 차트 안에서 바로 설명합니다.

highlights[]

데이터 한 점, 값 집합, 축 구간 또는 차트 영역을 원본 값을 바꾸지 않고 강조합니다.

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

데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다. 자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

interaction.playback.transition

재생은 안정 키가 같은 요소를 600ms ease-in-out으로 부드럽게 보간합니다. 새로 나타나거나 사라지는 표식은 페이드하고, 형태가 호환되지 않으면 교차 페이드하며, 동작 줄이기 환경에서는 즉시 최종 상태를 표시합니다.

interaction.selection

표식을 클릭해 선택하고 Escape로 해제하며 선택 상태와 이벤트를 애플리케이션에서 이용합니다.

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

이 예시는 외부 Cartesian x/y축을 사용하며 아래 옵션이 실제 라이브 차트에 적용됩니다.

axes.x2 / axes.y2

이 예시는 왼쪽 기본 y축과 독립된 오른쪽 y2 보조축에 서로 다른 단위의 계층을 연결합니다.

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()

색·선·기호가 나타내는 계열과 척도를 차트 안에서 바로 설명합니다.

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

데이터, 축 범위 또는 화면 위치에 사용자가 작성한 안전한 텍스트 설명을 연결합니다.

getAnnotationsVisible() · setAnnotationsVisible() · toggleAnnotations()

자동 배치는 둘레 후보를 비교해 차트·범례·다른 말풍선과의 겹침을 가능한 한 피합니다. 명시한 위치는 필요한 안전 보정만 적용해 유지합니다. 말풍선 글자는 상자 안에서 안전하게 자동 줄바꿈됩니다. 끊어지지 않는 긴 토큰은 정해진 줄 수 안에서 시각적으로 축약하지만, 보조 기술에는 원문 전체를 유지합니다.

interaction.playback.key · transition

재생은 안정 키가 같은 요소를 600ms ease-in-out으로 부드럽게 보간합니다. 새로 나타나거나 사라지는 표식은 페이드하고, 형태가 호환되지 않으면 교차 페이드하며, 동작 줄이기 환경에서는 즉시 최종 상태를 표시합니다.

getSelection() · setSelection() · clearSelection()

표식을 클릭해 선택하고 Escape로 해제하며 선택 상태와 이벤트를 애플리케이션에서 이용합니다.

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

안전한 이벤트

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();