이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Chart

Previous Next

아름다운 차트. LayerChart로 만들어졌습니다. 앱에 복사하여 붙여넣으세요.

막대 차트 - Interactive

최근 3개월간 총 방문자 수

차트를 소개합니다. 앱에 복사하여 붙여넣을 수 있는 차트 컴포넌트 모음입니다.

차트는 기본적으로 멋지게 보이도록 설계되었습니다. 다른 컴포넌트와 잘 작동하며 프로젝트에 맞게 완전히 커스터마이징할 수 있습니다.

차트 라이브러리 둘러보기

컴포넌트

내부적으로 LayerChart를 사용합니다.

Chart 컴포넌트는 조합을 염두에 두고 설계되었습니다. LayerChart 컴포넌트를 사용하여 차트를 구축하고, ChartTooltip과 같은 커스텀 컴포넌트는 필요할 때만 가져옵니다

<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { BarChart } from "layerchart";
 
  const data = [
    // ...
  ];
</script>
 
<Chart.Container>
  <BarChart {data} x="date" y="value">
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>

LayerChart를 래핑하지 않습니다. 이는 추상화에 갇히지 않는다는 의미입니다. 새로운 LayerChart 버전이 릴리스되면 공식 업그레이드 경로를 따라 차트를 업그레이드할 수 있습니다.

컴포넌트는 여러분의 것입니다.

설치

pnpm dlx shadcn-svelte@latest add chart

첫 번째 차트

첫 번째 차트를 만들어 봅시다. 축, 그리드, 툴팁, 범례가 있는 막대 차트를 만들 것입니다.

데이터 정의부터 시작하기

다음 데이터는 각 월의 데스크톱 및 모바일 사용자 수를 나타냅니다.

lib/components/example-chart.svelte
<script lang="ts">
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
  ];
</script>

차트 설정 정의하기

차트 설정은 차트의 구성을 담고 있습니다. 라벨, 아이콘, 테마용 색상 토큰과 같은 사람이 읽을 수 있는 문자열을 여기에 배치합니다.

lib/components/example-chart.svelte
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa",
    },
  } satisfies Chart.ChartConfig;
</script>

차트 구축하기

이제 LayerChart 컴포넌트를 사용하여 차트를 구축할 수 있습니다. 이 예제에서는 LayerChart의 "간소화된 차트" 중 하나인 BarChart 컴포넌트를 사용합니다.

이러한 컴포넌트는 많은 공통 차트 구조를 처리하면서도 원하는 대로 커스터마이징할 수 있습니다.

<script lang="ts">
  import { cn, type WithElementRef } from "$lib/utils.js";
  import type { HTMLAttributes } from "svelte/elements";
  import ChartStyle from "./chart-style.svelte";
  import { setChartContext, type ChartConfig } from "./chart-utils.js";

  const uid = $props.id();

  let {
    ref = $bindable(null),
    id = uid,
    class: className,
    children,
    config,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
    config: ChartConfig;
  } = $props();

  const chartId = `chart-${id || uid.replace(/:/g, "")}`;

  setChartContext({
    get config() {
      return config;
    },
  });
</script>

<div
  bind:this={ref}
  data-chart={chartId}
  data-slot="chart"
  class={cn(
    "flex aspect-video justify-center overflow-visible text-xs",
    // Overrides
    //
    // Stroke around dots/marks when hovering
    "[&_.lc-highlight-point]:stroke-transparent",
    // override the default stroke color of lines
    "[&_.lc-line]:stroke-border/50",

    // by default, layerchart shows a line intersecting the point when hovering, this hides that
    "[&_.lc-highlight-line]:stroke-0",

    // by default, when you hover a point on a stacked series chart, it will drop the opacity
    // of the other series, this overrides that
    "[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",

    // We don't want the little tick lines between the axis labels and the chart, so we remove
    // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
    // chart.
    "[&_.lc-axis-tick]:stroke-0",

    // We don't want to display the rule on the x/y axis, as there is already going to be
    // a grid line there and rule ends up overlapping the marks because it is rendered after
    // the marks
    "[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
    "[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
    "[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",

    // Legend adjustments
    "[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
    "[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
    "[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",

    // Labels
    "[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",

    // Tick labels on th x/y axes
    "[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
    "[&_.lc-tooltip-rects-g]:fill-transparent",
    "[&_.lc-layout-svg-g]:fill-transparent",
    "[&_.lc-root-container]:w-full",
    className
  )}
  {...restProps}
>
  <ChartStyle id={chartId} {config} />
  {@render children?.()}
</div>

<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { scaleBand } from "d3-scale";
  import { BarChart } from "layerchart";
 
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 }
  ];
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb"
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa"
    }
  } satisfies Chart.ChartConfig;
</script>
 
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    tooltip={false}
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color
      }
    ]}
  />
</Chart.Container>

이제 x축과 그리드가 있는 그룹 누적 막대 차트가 완성되었습니다.

축 눈금 조정하기

현재 막대 차트는 x축의 각 눈금에 전체 월 이름을 표시하고 있습니다. 처음 세 글자로 줄여봅시다.

x축에 커스텀 포매터 추가하기

props prop은 차트를 구성하는 다양한 컴포넌트에 커스텀 props를 전달하는 방법입니다. 여기서는 x축에 커스텀 포매터를 전달하고 있습니다.

<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    tooltip={false}
    seriesLayout="group"
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color,
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color,
      },
    ]}
    props={{
      xAxis: {
        format: (d) => d.slice(0, 3),
      },
    }}
  />
</Chart.Container>
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { scaleBand } from "d3-scale";
  import { BarChart } from "layerchart";
 
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 }
  ];
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb"
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa"
    }
  } satisfies Chart.ChartConfig;
</script>
 
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    tooltip={false}
    seriesLayout="group"
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color
      }
    ]}
    props={{
      xAxis: {
        format: (d) => d.slice(0, 3)
      }
    }}
  />
</Chart.Container>

툴팁 추가하기

지금까지 LayerChart의 BarChart 컴포넌트만 사용했습니다. chart 컴포넌트의 일부 커스터마이징 덕분에 기본적으로 멋지게 보입니다.

툴팁을 추가하기 위해 chart의 커스텀 Chart.Tooltip 컴포넌트를 사용하겠습니다.

차트에 Chart.Tooltip 컴포넌트 추가하기

tooltip={false} prop을 Chart.Tooltip 컴포넌트를 배치할 tooltip snippet으로 교체하겠습니다.

<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color,
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color,
      },
    ]}
    props={{
      xAxis: {
        format: (d) => d.slice(0, 3),
      },
    }}
  >
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { scaleBand } from "d3-scale";
  import { BarChart } from "layerchart";
 
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 }
  ];
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb"
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa"
    }
  } satisfies Chart.ChartConfig;
</script>
 
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color
      }
    ]}
  >
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>

범례 추가하기

legend prop을 true로 설정하기

legend prop은 차트의 범례를 표시하는 데 사용됩니다. 커스텀 범례를 더 쉽게 만들 수 있도록 툴팁과 유사한 페이로드를 추가하기 위해 LayerChart와 협력하고 있습니다.

<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    legend
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color,
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color,
      },
    ]}
    props={{
      xAxis: {
        format: (d) => d.slice(0, 3),
      },
    }}
  >
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { scaleBand } from "d3-scale";
  import { BarChart } from "layerchart";
 
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 }
  ];
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb"
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa"
    }
  } satisfies Chart.ChartConfig;
</script>
 
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart
    data={chartData}
    xScale={scaleBand().padding(0.25)}
    x="month"
    axis="x"
    seriesLayout="group"
    legend
    series={[
      {
        key: "desktop",
        label: chartConfig.desktop.label,
        color: chartConfig.desktop.color
      },
      {
        key: "mobile",
        label: chartConfig.mobile.label,
        color: chartConfig.mobile.color
      }
    ]}
  >
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>

완료되었습니다. 첫 번째 차트를 만들었습니다! 다음은 무엇일까요?

차트 설정

차트 설정은 차트의 라벨, 아이콘, 색상을 정의하는 곳입니다.

의도적으로 차트 데이터와 분리되어 있습니다.

이를 통해 차트 간에 설정과 색상 토큰을 공유할 수 있습니다. 데이터나 색상 토큰이 원격으로 존재하거나 다른 형식인 경우에도 독립적으로 작동할 수 있습니다.

<script lang="ts">
  import MonitorIcon from "@lucide/svelte/icons/monitor";
  import * as Chart from "$lib/components/ui/chart/index.js";
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      icon: MonitorIcon,
      // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
      color: "#2563eb",
      // OR a theme object with 'light' and 'dark' keys
      theme: {
        light: "#2563eb",
        dark: "#dc2626",
      },
    },
  } satisfies Chart.ChartConfig;
</script>

테마 설정

차트는 테마 설정을 기본적으로 지원합니다. CSS 변수(권장) 또는 hex, hsl, oklch와 같은 모든 색상 형식의 색상 값을 사용할 수 있습니다.

CSS 변수

CSS 파일에 색상 정의하기

src/routes/layout.css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... */
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
}

chartConfig에 색상 추가하기

<script lang="ts">
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "var(--chart-1)",
    },
    mobile: {
      label: "Mobile",
      color: "var(--chart-2)",
    },
  } satisfies Chart.ChartConfig;
</script>

hex, hsl 또는 oklch

차트 설정에서 직접 색상을 정의할 수도 있습니다. 선호하는 색상 형식을 사용하세요.

<script lang="ts">
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
  } satisfies Chart.ChartConfig;
</script>

색상 사용하기

차트에서 테마 색상을 사용하려면 var(--color-KEY) 형식으로 색상을 참조하세요.

컴포넌트

<Bar fill="var(--color-desktop)" />

차트 데이터

const chartData = [
  { browser: "chrome", visitors: 275, color: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, color: "var(--color-safari)" },
];

Tailwind

<Label class="fill-(--color-desktop)" />

툴팁

차트 툴팁은 라벨, 이름, 인디케이터, 값을 포함합니다. 이들을 조합하여 툴팁을 커스터마이징할 수 있습니다.

라벨
페이지 조회수
데스크톱
186
모바일
80
이름
Chrome
1,286
Firefox
1,000
페이지 조회수
데스크톱
12,486
인디케이터
Chrome
1,286
<script lang="ts">
  import TooltipDemo from "$lib/components/chart-tooltip-demo-item.svelte";
</script>
 
<div
  class="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4"
>
  <div>
    <div class="absolute start-[-35px] top-[45px] z-10 text-sm font-medium">
      라벨
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 193 40"
      width="50"
      height="12"
      fill="none"
      class="absolute start-[5px] top-[50px] z-10"
    >
      <g clip-path="url(#a)">
        <path
          fill="currentColor"
          d="M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z"
        />
      </g>
      <defs>
        <clipPath id="a">
          <path fill="currentColor" d="M0 0h193v40H0z" />
        </clipPath>
      </defs>
    </svg>
    <TooltipDemo
      label="페이지 조회수"
      payload={[
        { name: "데스크톱", value: 186, color: "var(--chart-1)" },
        { name: "모바일", value: 80, color: "var(--chart-2)" }
      ]}
      class="w-[8rem]"
    />
  </div>
  <div class="items-end">
    <div class="absolute start-[122px] top-[0px] z-10 text-sm font-medium">
      이름
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="35"
      height="42"
      fill="none"
      viewBox="0 0 122 148"
      class="absolute start-[85px] top-[10px] z-10 -scale-x-100"
    >
      <g clip-path="url(#ab)">
        <path
          fill="currentColor"
          d="M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z"
        />
      </g>
      <defs>
        <clipPath id="ab">
          <path fill="currentColor" d="M0 0h122v148H0z" />
        </clipPath>
      </defs>
    </svg>
    <TooltipDemo
      label="브라우저"
      hideLabel
      payload={[
        { name: "Chrome", value: 1286, color: "var(--chart-3)" },
        { name: "Firefox", value: 1000, color: "var(--chart-4)" }
      ]}
      indicator="dashed"
      class="w-[8rem]"
    />
  </div>
  <div class="!hidden md:!flex">
    <TooltipDemo
      label="페이지 조회수"
      payload={[{ name: "데스크톱", value: 12486, color: "var(--chart-3)" }]}
      class="w-[9rem]"
      indicator="line"
    />
  </div>
  <div class="!items-start !justify-start">
    <div class="absolute start-[50px] top-[60px] z-10 text-sm font-medium">
      인디케이터
    </div>
    <TooltipDemo
      label="브라우저"
      hideLabel
      payload={[{ name: "Chrome", value: 1286, color: "var(--chart-1)" }]}
      indicator="dot"
      class="w-[8rem]"
    />
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      height="34"
      fill="none"
      viewBox="0 0 75 175"
      class="absolute start-[30px] top-[38px] z-10 rotate-[-40deg]"
    >
      <g clip-path="url(#abc)">
        <path
          fill="currentColor"
          d="M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z"
        />
      </g>
      <defs>
        <clipPath id="abc">
          <path fill="currentColor" d="M0 0h75v175H0z" />
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

hideLabel, hideIndicator props를 사용하여 이들을 켜거나 끌 수 있으며, indicator prop을 사용하여 인디케이터 스타일을 커스터마이징할 수 있습니다.

툴팁 라벨과 이름에 커스텀 키를 사용하려면 labelKey와 nameKey를 사용하세요.

차트는 <Chart.Tooltip> 컴포넌트와 함께 제공됩니다. 이 컴포넌트를 사용하여 차트에 커스텀 툴팁을 추가할 수 있습니다.

Props

다음 props를 사용하여 툴팁을 커스터마이징하세요.

Prop Type Description
labelKey string 라벨에 사용할 설정 또는 데이터 키.
nameKey string 이름에 사용할 설정 또는 데이터 키.
indicator dot line or dashed 툴팁의 인디케이터 스타일.
hideLabel boolean 라벨을 숨길지 여부.
hideIndicator boolean 인디케이터를 숨길지 여부.
label string 툴팁의 커스텀 라벨
labelFormatter function 라벨을 포맷하는 함수.
formatter Snippet 툴팁의 유연한 렌더링을 제공하는 snippet.

색상

색상은 차트 설정에서 자동으로 참조됩니다.

커스텀

툴팁 라벨과 이름에 커스텀 키를 사용하려면 labelKey와 nameKey props를 사용하세요.

<script lang="ts">
  const chartData = [
    { browser: "chrome", visitors: 187, color: "var(--color-chrome)" },
    { browser: "safari", visitors: 200, color: "var(--color-safari)" },
  ];
 
  const chartConfig = {
    visitors: {
      label: "Total Visitors",
    },
    chrome: {
      label: "Chrome",
      color: "var(--chart-1)",
    },
    safari: {
      label: "Safari",
      color: "var(--chart-2)",
    },
  } satisfies ChartConfig;
</script>
 
<Chart.Tooltip labelKey="visitors" nameKey="browser" />

이렇게 하면 라벨에는 Total Visitors를, 툴팁 이름에는 Chrome과 Safari를 사용합니다.