로고와 위치.
모든 차트에 공통으로 적용되는 로고 표시, 위치와 Pro 사용자 지정 방법입니다.
기본 로고
#Community는 홈페이지의 세 막대 심볼과 굵은 syidax 워드마크를 한 줄(118×32px)로 표시합니다. 로고는 축·범례·내비게이터를 제외한 실제 그래프 영역의 선택한 모서리에 여백 없이 고정되며 범례·툴팁·로딩 상태보다 위에 표시됩니다. 배경 박스 없이 얇은 윤곽선으로 데이터와 구분합니다. 로고와 윤곽선은 테마에 맞춰 자동 보정되며 최소 7:1 대비를 유지합니다.
brand-position은 top-left·top-right·bottom-left·bottom-right를 지원하며 기본값은 bottom-right입니다. 직접 차트 태그와 공통 sy-chart에서 같은 속성을 사용합니다. 화면과 PNG·SVG 내보내기에 동일한 코너를 사용하며 CSV 같은 데이터 파일에는 로고를 추가하지 않습니다.
Data Zoom·Navigator·Visual Map은 별도의 로고를 그리지 않습니다. 연결된 대상 차트에 로고 속성을 설정하세요.
미리보기와 적용 코드
#로고를 바꿀 수 있는 정식 데모 라이선스가 적용되어 있습니다. 설정을 바꾸면 미리보기와 아래 코드에 반영됩니다.
현재 설정의 전체 적용 코드
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
define0();
const specs = [
{
"id": "example-chart",
"tag": "sy-line-chart",
"props": {
"engine": "standard",
"series": [
{
"name": "Organic",
"color": "#8263d9",
"values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
},
{
"name": "Direct",
"color": "#239c91",
"values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
},
{
"name": "Referral",
"color": "#e99954",
"values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
}
],
"xAxis": {
"kind": "category",
"categories": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
},
"yAxis": {
"kind": "linear",
"min": 0
},
"smooth": "none",
"thickness": 2.5,
"marker": "circle",
"markerSize": 4,
"legend": true,
"tooltip": {
"show": true,
"mode": "shared"
},
"width": 640,
"height": 360,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'line 예제 차트');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('pointClick', event.detail);
};
chart.addEventListener('pointClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('pointClick', onEvent);
container.replaceChildren();
}
</script>Pro 사용자 지정
#Pro의 chart.branding 권한으로 자신의 로고를 넣거나 brand-logo="none"으로 제거할 수 있습니다. Community에서는 기본 Syidax 로고가 유지됩니다.
<sy-line-chart brand-position="top-left"></sy-line-chart>
<!-- Pro: 유효한 chart.branding 권한 필요 -->
<sy-line-chart brand-position="bottom-right" brand-logo="none"></sy-line-chart>
<script type="module">
// 로컬 파일을 data URL로 변환한 뒤 할당합니다.
function setLogo(chart, file) {
if (!["image/png", "image/jpeg", "image/webp"].includes(file.type) || file.size > 100 * 1024) {
throw new Error("100 KB 이하의 PNG·JPEG·WebP 파일을 선택하세요.");
}
const reader = new FileReader();
reader.addEventListener("load", () => { chart.brandLogo = reader.result; });
reader.readAsDataURL(file);
}
</script>이미지 로고는 100 KB 이하 PNG·JPEG·WebP data URL을 사용합니다. SVG와 외부 이미지 URL은 지원하지 않습니다. 업로드한 이미지는 이 브라우저의 미리보기와 적용 코드에서만 사용됩니다.