Bar.

COMMUNITY

Compare category values with horizontal bars.

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

LIVE EXAMPLE

Channel comparison

Match the page theme

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

Read long item names beside horizontal bars. 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-bar-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-bar-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": "linear",
          "min": 0
        },
        "yAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
        },
        "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', 'bar 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 long category names or ranked lists.

Keep units consistent and choose the order deliberately. Differences are read through length regardless of orientation.

Data contract

Property	Input format
`series`	The values array for each comparison group.
`values`	Values for a single list.
`xAxis`	A linear axis defining the value range.
`yAxis`	Use categories for the horizontal bars' category names.

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