먼저, Svelte 프로젝트를 설정하고 필요한 종속성을 설치해야 합니다. 이를 위해 다음 명령을 실행합니다:

npx degit sveltejs/template svelte-app
cd svelte-app
npm install

그런 다음, src/Chart.svelte 파일을 생성하고 다음 코드를 작성합니다:

<script>
  import { onMount } from 'svelte';

  let chartData = [10, 20, 30, 40, 50];

  onMount(() => {
    // 여기에 차트를 그리는 로직을 작성합니다.
  });
</script>

<svg>
  {#each chartData as value, i}
    <rect x={i * 30} y={100 - value} width="20" height={value}></rect>
  {/each}
</svg>

먼저, onMount 함수를 사용하여 컴포넌트가 마운트된 후에 차트를 그리도록 설정합니다. 이 예시에서는 chartData라는 배열을 사용하여 각각의 막대를 표현합니다.

<svg> 요소 내에서 {#each} 블록을 사용하여 chartData 배열의 각 요소를 반복하고, rect 요소를 생성하여 각 막대를 그립니다. x와 y 속성은 막대의 위치를 설정하고, width와 height 속성은 막대의 크기를 설정합니다.

물론, 실제로 차트를 그리기 위해서는 Svelte와 함께 사용할 수 있는 차트 라이브러리를 설치하고 이를 활용해야 합니다. 대표적인 차트 라이브러리인 D3.js, Chart.js, Plotly 등을 사용하여 복잡한 차트를 그릴 수 있습니다.

Svelte에서 차트를 그리는 방법에 대한 예시를 제공했지만, 실제로는 차트 라이브러리를 사용하는 것이 일반적입니다. 선택한 차트 라이브러리의 문서를 참조하면 더 상세한 사용 방법을 알 수 있습니다.