syidaxdesign system
Home Pricing Settings
ComponentsData display

Sparkline Chart

PRO

Summarize numeric trends and changes in a small space.

<sy-sparkline-chart>Installation guide Basic usage
Live preview
Interact with the component to see results here.
View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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>

Usage guide

#

Summarize compact trends inside tables or cards. Use Charts for detailed visualizations with axes and legends.

Numeric values

Pass a numeric array to values and choose line, area, column, or pie in type.

Stock data

stock uses an array of objects with open, high, low, and close, rather than a numeric array.

Meaning and exploration
Explain the data with label and enable exploration with interactive and showTooltip.
Append live values
stream preserves the initial array length. Adding with addValue() removes the oldest value.

Examples

#

Lines and areas

Present the trend of a numeric array concisely.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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>

Bars

Compare the magnitude of each interval.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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>

Proportions

Show each value's proportion of the total.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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

Display open, high, low, and close values as a stock chart.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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>

Update and select values

Inspect additions, updates, removals, and the current array.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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">Add value</sy-button>
  <sy-button id="action-1" size="small">Update first value</sy-button>
  <sy-button id="action-2" size="small">Remove first value</sy-button>
  <sy-button id="action-3" size="small">Read values</sy-button>
  <sy-button id="action-4" size="small">Select third value</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;
  }) ?? 'Done';
  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>

Keep a fixed count

Adding a value removes the oldest one.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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">Add new value</sy-button>
  <sy-button id="action-1" size="small">Read values</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;
  }) ?? 'Done';
  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>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  font-color="currentColor"
  type="line"
  show-points
  interactive
  show-tooltip
  thickness="2"
  id="sample"
></sy-sparkline-chart>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</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;
  }) ?? 'Done';
  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>

Customize number formatting

Use formatter(value, index) to display values and tooltips in your preferred units. Pass arrays and functions as JavaScript properties, not HTML strings.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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>

Switch stock color conventions

Switch between US and Korean rising and falling colors for the same OHLC data.

View code
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">US colors</sy-button>
  <sy-button id="action-1" size="small">Korean colors</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;
  }) ?? 'Done';
  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>

Fixed value range

Keep the vertical range from 0 to 100 and display the latest value.

View code
HTML
<sy-sparkline-chart
  width="260"
  height="80"
  aria-label="Completed work over the last 8 days"
  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

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-sparkline-chart>

Properties

Attribute / PropertyTypeDefaultDescription
SySparklineValuesInput[]Array of numbers or OHLC objects. JSON strings are also accepted.

Pass objects and arrays as JavaScript properties.

SySparklineChartType'line'Chart type: line, area, column, pie, or stock.
number160Label area width, as a CSS length.
number40Height as a CSS length or a numeric string interpreted as pixels.
numberundefinedMinimum allowed value or input length. See the component's usage guide for the unit.
numberundefinedMaximum allowed value or input length.
booleanfalseUse smooth curves for line and area charts.
booleanfalseShow points on the line.
booleanfalseShow a summary value alongside the chart.
booleantrueExplore values with the pointer and keyboard.
string'Sparkline chart'Label describing the item.
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.

Pass objects and arrays as JavaScript properties.

string''Color applied to the component. Check the type for supported values.
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`.
booleanfalseAppend new values using a moving window that preserves the initial value count.
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`.
booleantrueShow the tooltip for the active data point.
string''Font size for the value label inside the SVG. Accepts any CSS length (e.g. `12px`, `0.85rem`). Spec name: `text-size`.
number2Divider thickness in pixels.
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 }>Read the result from the event's detail.
CustomEvent<{ index: number; value: number }>Read the result from the event's 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[]>Return the current chart data array.
Promise<void>Activate the specified data point.
Promise<void>Change the OHLC rising/falling color convention to us or 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 Navigate Enter Open