Column

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.

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

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):

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.

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:

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.

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:

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

Options

options.sortBars

boolean

default:"false"

Sort columns in descending order by value. Only applies to single-series grouped column charts (type: 'column').

Bar - Horizontal bars
Type options - Column chart options
Data labels - Display values and totals
Axes - Customize axes

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

When to use

Grouped columns

Single series

Sorted columns

Stacked columns

Stack totals

100 percent stacked columns

Show percentages

Options

​When to use

​Grouped columns

​Single series

​Sorted columns

​Stacked columns

​Stack totals

​100 percent stacked columns

​Show percentages

​Options

​Related

When to use

Grouped columns

Single series

Sorted columns

Stacked columns

Stack totals

100 percent stacked columns

Show percentages

Options

Related