Chart properties.

단순한 attribute부터 구조화된 데이터, 반응형 크기와 로고까지.

Attribute와 JavaScript 프로퍼티

문자열·숫자·불리언은 attribute로 설정할 수 있습니다. 객체·배열·함수는 JavaScript 프로퍼티에 전달하세요. boolean attribute는 생략할 때 기본값을 따르므로 명시적인 false는 프로퍼티 할당이 분명합니다.

<sy-line-chart id="trend" width="640" height="360" brand-position="top-left"></sy-line-chart>
<script type="module">
  await customElements.whenDefined('sy-line-chart');
  const chart = document.querySelector('#trend');
  chart.series = [{ name: '방문자', values: [24, 29, 27], color: '#8263d9' }];
  chart.xAxis = { kind: 'category', categories: ['1월', '2월', '3월'] };
  chart.yAxis = { kind: 'linear', min: 0 };
  chart.legend = true;
  chart.animated = false;
</script>

새 데이터와 반응형 크기

관측값을 바꿀 때 새 배열을 할당합니다. 컨테이너의 실제 너비를 관찰하고, 화면 해제 시 구독을 정리하세요. 차트마다 지원하는 appendBatch·replace 등의 메서드는 해당 API reference에 설명되어 있습니다.

const chart = document.querySelector('#trend');
chart.series = chart.series.map(series => ({
  ...series,
  values: series.values.map((value, index) => index === 2 ? 35 : value)
}));

const container = chart.parentElement;
const observer = new ResizeObserver(([entry]) => {
  chart.width = Math.max(160, Math.floor(entry.contentRect.width));
});
observer.observe(container);
// 화면을 해제할 때 observer.disconnect()를 호출하세요.

공통 sy-chart API와 직접 태그의 차이

개별 차트 문서는 sy-line-chart·sy-sankey 같은 직접 태그의 고유 API를 사용합니다. 공통 파사드 sy-chart는 type으로 차트 종류를 선택하고, 유형 전환·공통 메뉴·데이터 표·내보내기를 제공합니다.

기본 입력은 type·series·values·data로 전달합니다. 특화 옵션의 이름과 타입은 직접 태그와 다를 수 있으므로 아래 매핑과 공통 API를 확인하세요. 로고의 brandLogo·brandPosition은 같은 이름을 사용합니다.

주요 공통 속성

속성	타입 / 기본값
`type`	`ChartType`'line'
`brand-logo`	`string`undefined
`brand-position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`'bottom-right'
`series`	`LineChartSeries[] \| ScatterChartSeries[]`undefined
`values`	`LineChartValues \| ScatterChartValues`new Float32Array(0)
`engine`	`LineChartEngineMode`'auto'
`data`	RadarChartData \| FunnelChartData \| ReadonlyArray<DumbbellDatum> \| ReadonlyArray<DotPlotDatum> \| ReadonlyArray<TornadoDatum> \| ReadonlyArray<VariwideDatum> \| ChordData \| NetworkGraphData \| TreemapData \| SankeyData \| ErrorBarData \| WaterfallData \| BubbleData \| BoxPlotData \| CandlestickData \| CalendarHeatmapData \| SpectrogramInput \| DensityMapInput \| HeatmapData \| SunburstData \| IcicleData \| GanttData \| ParallelCoordinatesData \| DendrogramData \| GeoMapData \| Surface3DData \| Scatter3DData \| FlowLinesData \| ThemeRiverData \| Bar3DDataundefined
`contextmenu`	`boolean`false
`context-menu-items`	`ChartMenuItem[]`undefined
`theme`	`ChartThemeName \| ChartTheme`undefined

내보내기 메뉴의 기본 항목은 유지되며, contextMenuItems는 사용자 항목을 추가합니다. 전체 속성·이벤트·메서드는 공통 API reference, 로고 설정은 로고와 위치에서 확인하세요.

직접 태그와 파사드의 옵션 매핑

차트	직접 태그	sy-chart
Line·Area·Column·Bar	series / values / xAxis / yAxis	같은 이름
Pie·Item·Word Cloud	values	values
대부분의 Pro 차트	data	data
Icicle	direction	icicleDirection
Dendrogram	direction	dendrogramDirection
Flow Lines	routePath	flowLinesPath
Theme River	offset / order	themeRiverOffset / themeRiverOrder
Scatter 3D	marker	scatter3dMarker
Wafer Map	orientation	waferOrientation
로고	brandLogo / brandPosition	같은 이름

위 표는 자주 사용하는 매핑입니다. 직접 태그의 옵션을 파사드에 그대로 복사하기 전에 공통 API에서 이름과 타입을 확인하세요.

<sy-chart id="hierarchy" type="icicle" brand-position="bottom-left"></sy-chart>
<script type="module">
  // Pro 패키지의 sy-chart와 sy-icicle을 등록하고 라이선스를 연결한 뒤 실행합니다.
  await customElements.whenDefined('sy-chart');
  const chart = document.querySelector('#hierarchy');
  chart.icicleDirection = 'left-right';
  chart.data = [{ id: 'all', label: '전체', children: [
    { id: 'a', label: 'A', value: 60 },
    { id: 'b', label: 'B', value: 40 }
  ] }];
</script>