문서 › 상호작용과 내보내기

내보내기

PNG·SVG·CSV 내려받기, 표로 보기. 키·워터마크 없이.

카드 오른쪽 위의 내려받기 단추는 PNG를 바로 저장하고, ⋯ 메뉴에는 PNG · SVG · CSV · 표로 보기가 있습니다(exporting: false 로 숨김). 같은 일을 코드로도 할 수 있습니다.

움직이는 예제

차트를 누르거나 키보드로 움직여 보세요.

이 예제의 코드

const chart = createChart('#chart', {
  type: 'bar',
  title: '지역별 주문',
  unit: '건',
  data: {
    labels: ['서울', '경기', '부산', '대구', '인천', '광주'],
    series: [{ name: '주문', data: [4820, 3910, 1640, 1120, 1080, 760] }],
  },
});
log(chart.toCSV());

메서드	돌려주는 것
`chart.toPNG(scale = 2)`	`Promise<Blob>` — 레티나용 2배 PNG
`chart.toSVG()`	색이 모두 풀린 독립 SVG 문자열 (제목·범례·주석 포함)
`chart.toCSV()`	CSV 문자열. 단위 없는 원래 숫자라 엑셀에서 바로 더할 수 있음
`chart.download('png' \| 'svg' \| 'csv', filename?)`	파일로 저장. 이름을 안 주면 제목

CSV는 엑셀에서 바로 열리게 만듭니다. 한글이 깨지지 않게 BOM을 붙이고, 첫 줄은 머리글(첫 열은 xAxis.title, 없으면 "항목"), 날짜는 2026-10-21 (시각이 있으면 2026-10-21 09:30) 처럼 timeZone 의 현지 날짜로 적고, 숫자는 만·억·단위 없이 원래 값 그대로라 바로 더할 수 있습니다.
= · + · @ 로 시작하는 글자는 수식으로 실행되지 않게 막습니다.
table: true 면 차트 아래에 데이터 표가 처음부터 보입니다. 표는 꺼져 있어도 스크린리더용으로 늘 들어 있습니다.
인쇄할 때는 단추·툴팁이 숨겨집니다.

// 보고서 메일에 붙일 PNG
const blob = await chart.toPNG(2);
const form = new FormData();
form.append('file', blob, 'sales.png');
await fetch('/api/report', { method: 'POST', body: form });