> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Bar

export const GraphPreview = ({config, aspectRatio = '10 / 6'}) => {
  const getThemeId = () => {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  };
  const [themeId, setThemeId] = useState(getThemeId);
  const [isLoaded, setIsLoaded] = useState(false);
  config.appearance = {
    ...config.appearance,
    border: {
      style: 'none',
      color: 'transparent',
      width: 0
    },
    hasRoundedBorders: false
  };
  const baseUrl = window.location.hostname === 'localhost' ? 'https://app.graphy.top:8080' : 'https://visualize.graphy.app';
  const url = new URL('view/graph', baseUrl);
  url.searchParams.set('config', JSON.stringify(config));
  url.searchParams.set('themeId', themeId);
  useEffect(() => {
    const observer = new MutationObserver(function (mutations) {
      setThemeId(getThemeId());
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  return <div className="graph-preview" style={{
    aspectRatio,
    opacity: isLoaded ? 1 : 0
  }}>
      <iframe src={url.toString()} loading="lazy" onLoad={() => setIsLoaded(true)} allowfullscreen="true" />
    </div>;
};

Bar charts display data as horizontal bars. They support three variants: grouped, stacked and 100% stacked.

## When to use

* **Comparing categories** - Show differences between discrete groups
* **Ranking data** - Display ordered comparisons
* **Long category names** - Horizontal orientation accommodates longer labels
* **Large number of categories** - Easier to read than vertical columns
* **Part-to-whole comparisons** - Use stacked variants to show composition

## Grouped bars

Display multiple series side-by-side for easy comparison.

<GraphPreview
  config={{
type: 'bar',
data: {
  columns: [
    { key: 'region', label: 'Region' },
    { key: 'q1', label: 'Q1' },
    { key: 'q2', label: 'Q2' },
  ],
  rows: [
    { region: 'North', q1: 150, q2: 180 },
    { region: 'South', q1: 120, q2: 145 },
    { region: 'East', q1: 200, q2: 220 },
    { region: 'West', q1: 175, q2: 190 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'bar',
  data: {
    columns: [
      { key: 'region', label: 'Region' },
      { key: 'q1', label: 'Q1' },
      { key: 'q2', label: 'Q2' },
    ],
    rows: [
      { region: 'North', q1: 150, q2: 180 },
      { region: 'South', q1: 120, q2: 145 },
      { region: 'East', q1: 200, q2: 220 },
      { region: 'West', q1: 175, q2: 190 },
    ],
  },
};
```

### Single series

<GraphPreview
  config={{
type: 'bar',
data: {
  columns: [
    { key: 'country', label: 'Country' },
    { key: 'population', label: 'Population' },
  ],
  rows: [
    { country: 'China', population: 1412 },
    { country: 'India', population: 1408 },
    { country: 'United States', population: 333 },
    { country: 'Indonesia', population: 275 },
    { country: 'Pakistan', population: 231 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'bar',
  data: {
    columns: [
      { key: 'country', label: 'Country' },
      { key: 'population', label: 'Population' },
    ],
    rows: [
      { country: 'China', population: 1412 },
      { country: 'India', population: 1408 },
      { country: 'United States', population: 333 },
      { country: 'Indonesia', population: 275 },
      { country: 'Pakistan', population: 231 },
    ],
  },
};
```

### Sorted bars

Sort bars by value in descending order (single-series only):

<GraphPreview
  config={{
type: 'bar',
options: {
  sortBars: true,
},
data: {
  columns: [
    { key: 'country', label: 'Country' },
    { key: 'population', label: 'Population' },
  ],
  rows: [
    { country: 'China', population: 1412 },
    { country: 'India', population: 1408 },
    { country: 'United States', population: 333 },
    { country: 'Indonesia', population: 275 },
    { country: 'Pakistan', population: 231 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'bar',
  options: {
    sortBars: true, // Sort from highest to lowest
  },
  data: {
    /* ... */
  },
};
```

## Stacked bars

Stack multiple series end-to-end to show both individual values and cumulative totals.

<GraphPreview
  config={{
type: 'barStacked',
data: {
  columns: [
    { key: 'department', label: 'Department' },
    { key: 'full_time', label: 'Full time' },
    { key: 'part_time', label: 'Part time' },
    { key: 'contract', label: 'Contract' },
  ],
  rows: [
    { department: 'Engineering', full_time: 45, part_time: 5, contract: 10 },
    { department: 'Sales', full_time: 30, part_time: 15, contract: 5 },
    { department: 'Marketing', full_time: 20, part_time: 8, contract: 12 },
    { department: 'Support', full_time: 25, part_time: 20, contract: 5 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'barStacked',
  data: {
    columns: [
      { key: 'department', label: 'Department' },
      { key: 'full_time', label: 'Full time' },
      { key: 'part_time', label: 'Part time' },
      { key: 'contract', label: 'Contract' },
    ],
    rows: [
      { department: 'Engineering', full_time: 45, part_time: 5, contract: 10 },
      { department: 'Sales', full_time: 30, part_time: 15, contract: 5 },
      { department: 'Marketing', full_time: 20, part_time: 8, contract: 12 },
      { department: 'Support', full_time: 25, part_time: 20, contract: 5 },
    ],
  },
};
```

### Stack totals

Show the total value at the end of each stacked bar:

<GraphPreview
  config={{
type: 'barStacked',
dataLabels: {
  showStackTotals: true,
},
data: {
  columns: [
    { key: 'department', label: 'Department' },
    { key: 'full_time', label: 'Full time' },
    { key: 'part_time', label: 'Part time' },
    { key: 'contract', label: 'Contract' },
  ],
  rows: [
    { department: 'Engineering', full_time: 45, part_time: 5, contract: 10 },
    { department: 'Sales', full_time: 30, part_time: 15, contract: 5 },
    { department: 'Marketing', full_time: 20, part_time: 8, contract: 12 },
    { department: 'Support', full_time: 25, part_time: 20, contract: 5 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'barStacked',
  dataLabels: {
    showStackTotals: true,
  },
  data: {
    /* ... */
  },
};
```

## 100 percent stacked bars

Normalise each bar to 100% to show relative proportions rather than absolute values.

<GraphPreview
  config={{
type: 'barStackedFill',
data: {
  columns: [
    { key: 'product', label: 'Product' },
    { key: 'online', label: 'Online' },
    { key: 'retail', label: 'Retail' },
    { key: 'wholesale', label: 'Wholesale' },
  ],
  rows: [
    { product: 'Product A', online: 5000, retail: 3000, wholesale: 2000 },
    { product: 'Product B', online: 1500, retail: 2500, wholesale: 1000 },
    { product: 'Product C', online: 4000, retail: 2000, wholesale: 4000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'barStackedFill',
  data: {
    columns: [
      { key: 'product', label: 'Product' },
      { key: 'online', label: 'Online' },
      { key: 'retail', label: 'Retail' },
      { key: 'wholesale', label: 'Wholesale' },
    ],
    rows: [
      { product: 'Product A', online: 5000, retail: 3000, wholesale: 2000 },
      { product: 'Product B', online: 1500, retail: 2500, wholesale: 1000 },
      { product: 'Product C', online: 4000, retail: 2000, wholesale: 4000 },
    ],
  },
};
```

### Show percentages

Display percentage values instead of absolute values:

<GraphPreview
  config={{
type: 'barStackedFill',
dataLabels: {
  showDataLabels: true,
  dataLabelFormat: 'percentage',
},
data: {
  columns: [
    { key: 'product', label: 'Product' },
    { key: 'online', label: 'Online' },
    { key: 'retail', label: 'Retail' },
    { key: 'wholesale', label: 'Wholesale' },
  ],
  rows: [
    { product: 'Product A', online: 5000, retail: 3000, wholesale: 2000 },
    { product: 'Product B', online: 1500, retail: 2500, wholesale: 1000 },
    { product: 'Product C', online: 4000, retail: 2000, wholesale: 4000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'barStackedFill',
  dataLabels: {
    showDataLabels: true,
    dataLabelFormat: 'percentage',
  },
  data: {
    /* ... */
  },
};
```

## Options

<ParamField path="options.sortBars" type="boolean" default="false">
  Sort bars in descending order by value. Only applies to single-series grouped bar charts (`type: 'bar'`).
</ParamField>

## Related

* [Column](/sdk/graph-types/column) - Vertical bars
* [Type options](/sdk/config/type-options) - Bar chart options
* [Data labels](/sdk/config/data-labels) - Display values and totals
* [Axes](/sdk/config/axes) - Customize axes