syidaxdesign system
홈 가격 내 정보
ComponentsData display

Sparkline Chart

PRO

작은 공간에 수치의 흐름과 변화를 요약합니다.

<sy-sparkline-chart>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

사용 가이드

#

표·카드 안에서 작은 추세를 요약합니다. 축·범례로 자세히 읽어야 하는 시각화는 Charts를 사용하세요.

일반 수치

values에 숫자 배열을 넣고 type의 line·area·column·pie를 선택합니다.

주가 데이터

stock은 숫자 배열 대신 open·high·low·close를 가진 객체 배열을 사용합니다.

의미와 탐색
label로 데이터의 의미를 설명하고 interactive·showTooltip으로 탐색을 허용합니다.
실시간 값 추가
stream은 초기 배열 길이를 유지합니다. addValue()로 추가하면 가장 오래된 값이 빠집니다.

예제

#

선과 면

숫자 배열의 흐름을 간결하게 표현합니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="area"
  smooth
  show-points
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

막대

각 구간의 크기를 비교합니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="column"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

비율

전체에서 각 값이 차지하는 비율입니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="pie"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
</script>

OHLC

시가·고가·저가·종가를 주가형으로 표시합니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="stock"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [{
        "open": 12,
        "high": 20,
        "low": 9,
        "close": 18
      },
      {
        "open": 18,
        "high": 22,
        "low": 12,
        "close": 14
      },
      {
        "open": 14,
        "high": 28,
        "low": 13,
        "close": 25
      },
      {
        "open": 25,
        "high": 30,
        "low": 20,
        "close": 23
      }
    ]
  });
</script>

값 갱신과 선택

추가·수정·제거 결과와 현재 배열을 확인합니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">값 추가</sy-button>
  <sy-button id="action-1" size="small">첫 값 수정</sy-button>
  <sy-button id="action-2" size="small">첫 값 제거</sy-button>
  <sy-button id="action-3" size="small">값 조회</sy-button>
  <sy-button id="action-4" size="small">세 번째 선택</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.addValue(42);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.updateValue(0, 20);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.removeValue(0);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget3 = document.querySelector("#sample");
  document.querySelector('#action-3').addEventListener('click', async () => {
    const result = await actionTarget3.getValues();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget4 = document.querySelector("#sample");
  document.querySelector('#action-4').addEventListener('click', async () => {
    const result = await actionTarget4.setActiveIndex(2);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

일정 개수 유지

값을 추가하면 가장 오래된 값이 빠집니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  stream
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">새 값 추가</sy-button>
  <sy-button id="action-1" size="small">값 조회</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.addValue(40);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.getValues();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  for (const name of ["pointSelected", "pointFocused", "valueAdded", "valueUpdated",
    "valueRemoved"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

수치 형식 바꾸기

formatter(value, index)로 값과 툴팁을 원하는 단위로 표현합니다. 배열·함수는 HTML 문자열이 아닌 JavaScript 프로퍼티로 전달하세요.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-points
  show-value
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const component2 = document.querySelector("#sample");
  Object.assign(component2, {
    "showValue": true,
    "showTooltip": true
  });
  await (root => {
    root.querySelector('sy-sparkline-chart').formatter = (value, index) => _msg("m_5a917878dda1",
      [index + 1, value.toLocaleString()]);
  })(document);
</script>

주가 색상 규칙 전환

같은 OHLC 데이터에서 미국식과 한국식 상승·하락 색상을 전환합니다.

코드 보기
HTML
<sy-sparkline-chart
  type="stock"
  width="300"
  height="100"
  id="sample"
></sy-sparkline-chart>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">미국식 색상</sy-button>
  <sy-button id="action-1" size="small">한국식 색상</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [{
        "open": 10,
        "high": 16,
        "low": 9,
        "close": 14
      },
      {
        "open": 14,
        "high": 15,
        "low": 10,
        "close": 11
      },
      {
        "open": 11,
        "high": 17,
        "low": 10,
        "close": 16
      }
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setStockColorScheme("us");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setStockColorScheme("kr");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

고정된 값 범위

세로 범위를 0부터 100까지 고정하고 마지막 값을 표시합니다.

코드 보기
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="최근 8일 작업 완료 추이"
  font-color="currentColor"
  type="line"
  show-value
  interactive
  show-tooltip
  thickness="2"
  min="0"
  max="100"
  id="sample"
></sy-sparkline-chart>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "values": [
      12,
      18,
      14,
      26,
      22,
      30,
      27,
      36
    ]
  });
  const component2 = document.querySelector("#sample");
  Object.assign(component2, {
    "type": "line",
    "min": 0,
    "max": 100,
    "showPoints": false,
    "showValue": true
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-sparkline-chart>

Properties

Attribute / PropertyTypeDefaultDescription
SySparklineValuesInput[]숫자 배열 또는 OHLC 객체 배열입니다. JSON 문자열도 허용합니다.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

SySparklineChartType'line'line·area·column·pie·stock 표시 종류입니다.
number160레이블 영역 너비입니다. CSS 길이 값을 사용합니다.
number40높이입니다. CSS 길이 또는 px로 해석되는 숫자 문자열입니다.
numberundefined허용하는 최솟값 또는 입력 최소 길이입니다. 사용 가이드에서 해당 컴포넌트의 단위를 확인하세요.
numberundefined허용하는 최댓값 또는 입력 최대 길이입니다.
booleanfalseline·area에서 부드러운 곡선을 사용합니다.
booleanfalse선 위의 점을 표시합니다.
booleanfalse차트와 함께 대표 수치를 표시합니다.
booleantrue포인터와 키보드로 값을 탐색합니다.
string'Sparkline chart'항목을 설명하는 레이블입니다.
string'No data'Empty-state placeholder text shown when `values` has no usable numbers. Spec name: `empty-text`.
(value: number, index: number) => stringundefinedOptional formatter for the tooltip / value label.

객체·배열 값은 JavaScript 프로퍼티로 전달합니다.

string''컴포넌트에 적용할 색상입니다. 지원하는 값은 타입을 확인하세요.
string'#000000'CSS colour for the value label and tooltip text. Spec name: `font-color`.
'top' | 'bottom''top'Where to render the value label relative to the active point. With `auto` (the default) the label flips when there isn't enough room on the chosen side. Spec name: `text-position`.
booleanfalse초기 값 개수를 유지하는 이동 창 방식으로 새 값을 추가합니다.
booleantrueAnimate stream transitions (line/area/column/stock slide left as new values arrive).
number1000Maximum stream animation duration in milliseconds. When values arrive faster than this, the component follows the observed push cadence so the latest value does not lag behind the feed. Spec name: `stream-duration`.
booleantrue활성 데이터 점의 툴팁을 표시합니다.
string''Font size for the value label inside the SVG. Accepts any CSS length (e.g. `12px`, `0.85rem`). Spec name: `text-size`.
number2구분선의 두께(px)입니다.
string''Reference baseline. Line / area / column compare points against this value and render "above" / "below" colours. Stock draws the same horizontal reference line but keeps its up/down candle colours. Empty or non-numeric values disable the feature.
SySparklineStockColorScheme'us'Stock candle colour convention. `us` = up green / down red. `kr` = up red / down blue. Other chart types ignore this prop. Spec name: `stock-color-scheme`.

Events

EventDetailDescription
CustomEvent<{ index: number; value: number }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ index: number; value: number }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ index: number; value: number; values: number[] }>Fires after `addValue()` accepts a value. Detail carries the index it landed at.
CustomEvent<{ index: number; value: number; oldValue: number; values: number[] }>Fires after `updateValue()` replaces a value. Detail carries the old + new value.
CustomEvent<{ index: number; value: number; values: number[] }>Fires after `removeValue()` removes a value. Detail carries the removed value.

Methods

MethodReturnsDescription
Promise<number[] | SySparklineStockValue[]>현재 차트 데이터 배열을 반환합니다.
Promise<void>지정한 데이터 점을 활성화합니다.
Promise<void>OHLC 상승·하락 색상 기준을 us 또는 kr로 변경합니다.
Promise<void>Append a value. In `stream` mode the oldest entry is dropped once the rolling-window cap is reached, and the inner geometry slides one step to the left so the new value appears to push in from the right rather than the existing line wiggling up and down. Non-finite values are ignored.
Promise<void>Replace the value at `index`. Out-of-range indices are silently ignored. Non-finite values are ignored.
Promise<void>Remove the value at `index`. Out-of-range indices are silently ignored.
Design SystemTab 이동 Enter 열기