> ## 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.

# Column

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>;
};

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

## When to use

* **Comparing values across categories** - Show differences between discrete groups
* **Time-based comparisons** - Track changes over time periods
* **Small to moderate number of categories** - Works best with 3-12 categories
* **Multiple series comparison** - Compare several series side-by-side
* **Part-to-whole relationships** - Use stacked variants to show composition

## Grouped columns

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

<GraphPreview
  config={{
type: 'column',
data: {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'revenue', label: 'Revenue' },
    { key: 'costs', label: 'Costs' },
  ],
  rows: [
    { month: 'Q1', revenue: 150000, costs: 95000 },
    { month: 'Q2', revenue: 180000, costs: 105000 },
    { month: 'Q3', revenue: 210000, costs: 115000 },
    { month: 'Q4', revenue: 240000, costs: 125000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' },
      { key: 'costs', label: 'Costs' },
    ],
    rows: [
      { month: 'Q1', revenue: 150000, costs: 95000 },
      { month: 'Q2', revenue: 180000, costs: 105000 },
      { month: 'Q3', revenue: 210000, costs: 115000 },
      { month: 'Q4', revenue: 240000, costs: 125000 },
    ],
  },
};
```

### Single series

<GraphPreview
  config={{
type: 'column',
data: {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'sales', label: 'Sales' },
  ],
  rows: [
    { month: 'Jan', sales: 12000 },
    { month: 'Feb', sales: 15000 },
    { month: 'Mar', sales: 18000 },
    { month: 'Apr', sales: 16000 },
    { month: 'May', sales: 21000 },
    { month: 'Jun', sales: 24000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'sales', label: 'Sales' },
    ],
    rows: [
      { month: 'Jan', sales: 12000 },
      { month: 'Feb', sales: 15000 },
      { month: 'Mar', sales: 18000 },
      { month: 'Apr', sales: 16000 },
      { month: 'May', sales: 21000 },
      { month: 'Jun', sales: 24000 },
    ],
  },
};
```

### Sorted columns

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

<GraphPreview
  config={{
type: 'column',
options: {
  sortBars: true,
},
data: {
  columns: [
    { key: 'month', label: 'Month' },
    { key: 'sales', label: 'Sales' },
  ],
  rows: [
    { month: 'Jan', sales: 12000 },
    { month: 'Feb', sales: 15000 },
    { month: 'Mar', sales: 18000 },
    { month: 'Apr', sales: 16000 },
    { month: 'May', sales: 21000 },
    { month: 'Jun', sales: 24000 },
  ],
},
}}
/>

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

## Stacked columns

Stack multiple series on top of each other to show both individual values and cumulative totals.

<GraphPreview
  config={{
type: 'columnStacked',
data: {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'desktop', label: 'Desktop' },
    { key: 'mobile', label: 'Mobile' },
    { key: 'tablet', label: 'Tablet' },
  ],
  rows: [
    { quarter: 'Q1', desktop: 45000, mobile: 28000, tablet: 12000 },
    { quarter: 'Q2', desktop: 48000, mobile: 35000, tablet: 15000 },
    { quarter: 'Q3', desktop: 50000, mobile: 42000, tablet: 18000 },
    { quarter: 'Q4', desktop: 52000, mobile: 48000, tablet: 20000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'columnStacked',
  data: {
    columns: [
      { key: 'quarter', label: 'Quarter' },
      { key: 'desktop', label: 'Desktop' },
      { key: 'mobile', label: 'Mobile' },
      { key: 'tablet', label: 'Tablet' },
    ],
    rows: [
      { quarter: 'Q1', desktop: 45000, mobile: 28000, tablet: 12000 },
      { quarter: 'Q2', desktop: 48000, mobile: 35000, tablet: 15000 },
      { quarter: 'Q3', desktop: 50000, mobile: 42000, tablet: 18000 },
      { quarter: 'Q4', desktop: 52000, mobile: 48000, tablet: 20000 },
    ],
  },
};
```

### Stack totals

Show the total value at the top of each stacked column:

<GraphPreview
  config={{
type: 'columnStacked',
dataLabels: {
  showStackTotals: true,
},
data: {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'desktop', label: 'Desktop' },
    { key: 'mobile', label: 'Mobile' },
    { key: 'tablet', label: 'Tablet' },
  ],
  rows: [
    { quarter: 'Q1', desktop: 45000, mobile: 28000, tablet: 12000 },
    { quarter: 'Q2', desktop: 48000, mobile: 35000, tablet: 15000 },
    { quarter: 'Q3', desktop: 50000, mobile: 42000, tablet: 18000 },
    { quarter: 'Q4', desktop: 52000, mobile: 48000, tablet: 20000 },
  ],
},
}}
/>

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

## 100 percent stacked columns

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

<GraphPreview
  config={{
type: 'columnStackedFill',
data: {
  columns: [
    { key: 'year', label: 'Year' },
    { key: 'renewable', label: 'Renewable' },
    { key: 'natural_gas', label: 'Natural gas' },
    { key: 'coal', label: 'Coal' },
  ],
  rows: [
    { year: '2020', renewable: 200, natural_gas: 500, coal: 300 },
    { year: '2021', renewable: 250, natural_gas: 480, coal: 270 },
    { year: '2022', renewable: 320, natural_gas: 450, coal: 230 },
    { year: '2023', renewable: 400, natural_gas: 420, coal: 180 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'columnStackedFill',
  data: {
    columns: [
      { key: 'year', label: 'Year' },
      { key: 'renewable', label: 'Renewable' },
      { key: 'natural_gas', label: 'Natural gas' },
      { key: 'coal', label: 'Coal' },
    ],
    rows: [
      { year: '2020', renewable: 200, natural_gas: 500, coal: 300 },
      { year: '2021', renewable: 250, natural_gas: 480, coal: 270 },
      { year: '2022', renewable: 320, natural_gas: 450, coal: 230 },
      { year: '2023', renewable: 400, natural_gas: 420, coal: 180 },
    ],
  },
};
```

### Show percentages

Display percentage values instead of absolute values:

<GraphPreview
  config={{
type: 'columnStackedFill',
dataLabels: {
  showDataLabels: true,
  dataLabelFormat: 'percentage',
},
data: {
  columns: [
    { key: 'year', label: 'Year' },
    { key: 'renewable', label: 'Renewable' },
    { key: 'natural_gas', label: 'Natural gas' },
    { key: 'coal', label: 'Coal' },
  ],
  rows: [
    { year: '2020', renewable: 200, natural_gas: 500, coal: 300 },
    { year: '2021', renewable: 250, natural_gas: 480, coal: 270 },
    { year: '2022', renewable: 320, natural_gas: 450, coal: 230 },
    { year: '2023', renewable: 400, natural_gas: 420, coal: 180 },
  ],
},
}}
/>

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

## Options

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

## Related

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