Box Plot.

PRO

Summarize the median and spread with boxes and whiskers.

<sy-box-plot-chart>Installation and integration API reference

LIVE EXAMPLE

Distribution by process

Match the page theme

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

Calculate the median, quartiles, and whiskers from raw samples. 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-pro/components/sy-box-plot-chart.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-box-plot-chart",
      "props": {
        "data": [
          {
            "category": "Process A",
            "values": [21, 24, 25, 28, 29, 31, 35, 47]
          },
          {
            "category": "Process B",
            "values": [25, 28, 30, 32, 34, 35, 37, 39]
          },
          {
            "category": "Process C",
            "values": [20, 25, 29, 32, 35, 38, 45, 52]
          }
        ],
        "orientation": "vertical",
        "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', 'box-plot 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 distributions across groups and explore outliers.

Whiskers follow the configured calculation rule. Inspect raw values as well when the sample is small.

Data contract

Property	Input format
`data`	Pass raw samples as { category, values: [...] } or provide summary statistics.
`orientation`	The direction in which boxes are drawn.

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