Parallel Coordinates.

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

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

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-parallel-coordinates",
      "props": {
        "data": [
          {
            "id": "a",
            "label": "Product A",
            "color": "#8263d9",
            "values": {
              "price": 30,
              "quality": 90,
              "speed": 65,
              "support": 80
            }
          },
          {
            "id": "b",
            "label": "Product B",
            "color": "#239c91",
            "values": {
              "price": 65,
              "quality": 75,
              "speed": 90,
              "support": 60
            }
          },
          {
            "id": "c",
            "label": "Product C",
            "color": "#e99954",
            "values": {
              "price": 45,
              "quality": 70,
              "speed": 75,
              "support": 95
            }
          }
        ],
        "dimensions": [
          {
            "id": "price",
            "label": "Price",
            "domain": [0, 100]
          },
          {
            "id": "quality",
            "label": "Quality",
            "domain": [0, 100]
          },
          {
            "id": "speed",
            "label": "Speed",
            "domain": [0, 100]
          },
          {
            "id": "support",
            "label": "Support",
            "domain": [0, 100]
          }
        ],
        "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', 'parallel-coordinates example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('rowClick', event.detail);
  };
  chart.addEventListener('rowClick', 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('rowClick', onEvent);
    container.replaceChildren();
  }
</script>