Area.

COMMUNITY

Show trends and magnitude with filled areas.

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

LIVE EXAMPLE

Trends by channel

Match the page theme

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

Show the magnitude and change of two series on a shared time axis. 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-area-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-area-chart",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Online",
            "values": [24, 29, 27, 38, 43, 40],
            "color": "#8263d9"
          },
          {
            "name": "Store",
            "values": [15, 19, 17, 24, 22, 29],
            "color": "#239c91"
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "legend": true,
        "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', 'area 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

Use for traffic, revenue, and other measures whose magnitude changes over time.

Overlapping areas may hide series behind them. Provide tooltips and a data table for precise comparisons.

Data contract

Property	Input format
`series`	Each series contains values in chronological order.
`xAxis`	Provide categories with the same length as the series.
`yAxis`	The value axis that defines the area's baseline.

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 28 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.