Line.

COMMUNITY

Read changes over time as lines.

<sy-line-chart>Installation and integration API reference

LIVE EXAMPLE

Monthly visitors

Match the page theme

Interact with the chart to see selection and range-change results here.

Compare monthly visitor trends across three channels. All values are sample data. All values are sample data.

View code

Current preview

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-line-chart",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Organic",
            "color": "#8263d9",
            "values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
          },
          {
            "name": "Direct",
            "color": "#239c91",
            "values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
          },
          {
            "name": "Referral",
            "color": "#e99954",
            "values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "smooth": "none",
        "thickness": 2.5,
        "marker": "circle",
        "markerSize": 4,
        "legend": true,
        "tooltip": {
          "show": true,
          "mode": "shared"
        },
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'line example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

Usage and data

Compare trends and differences between series with dates or an ordered sequence.

Use Column or Bar to compare unrelated categories. Distinguish interpolated curves from actual measurements.

Data contract

Property	Input format
`series`	An array of series with names, colors, and values. Matching indices represent the same point in time.
`xAxis`	Match category axis categories to the values order.
`yAxis`	Use consistent units and ranges for values being compared.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Feature examples

Try 34 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.