Scatter.

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

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

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-scatter-chart",
      "props": {
        "engine": "standard",
        "values": [
          {
            "x": 0,
            "y": 7
          },
          {
            "x": 16,
            "y": 4
          },
          {
            "x": 29,
            "y": -3
          },
          {
            "x": 37,
            "y": -7
          },
          {
            "x": 44,
            "y": -5
          },
          {
            "x": 55,
            "y": 2
          },
          {
            "x": -1,
            "y": 17
          },
          {
            "x": 15,
            "y": 15
          },
          {
            "x": 29,
            "y": 9
          },
          {
            "x": 38,
            "y": 4
          },
          {
            "x": 45,
            "y": 4
          },
          {
            "x": 55,
            "y": 10
          },
          {
            "x": -3,
            "y": 26
          },
          {
            "x": 14,
            "y": 26
          },
          {
            "x": 29,
            "y": 21
          },
          {
            "x": 39,
            "y": 15
          },
          {
            "x": 47,
            "y": 13
          },
          {
            "x": 55,
            "y": 18
          },
          {
            "x": -4,
            "y": 35
          },
          {
            "x": 13,
            "y": 37
          },
          {
            "x": 29,
            "y": 33
          },
          {
            "x": 40,
            "y": 26
          },
          {
            "x": 48,
            "y": 23
          },
          {
            "x": 56,
            "y": 26
          },
          {
            "x": -5,
            "y": 43
          },
          {
            "x": 11,
            "y": 47
          },
          {
            "x": 28,
            "y": 45
          },
          {
            "x": 41,
            "y": 38
          },
          {
            "x": 49,
            "y": 33
          },
          {
            "x": 57,
            "y": 35
          },
          {
            "x": -5,
            "y": 51
          },
          {
            "x": 10,
            "y": 56
          },
          {
            "x": 27,
            "y": 56
          },
          {
            "x": 41,
            "y": 50
          },
          {
            "x": 51,
            "y": 44
          },
          {
            "x": 58,
            "y": 44
          }
        ],
        "markerSize": 5,
        "xAxis": {
          "kind": "linear"
        },
        "yAxis": {
          "kind": "linear"
        },
        "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', 'scatter 예제 차트');
    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);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>