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>

Feature examples

Choose a feature from 32 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.