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% 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% stacked columns

Show percentages

Options

​When to use

​Grouped columns

​Single series

​Sorted columns

​Stacked columns

​Stack totals

​100% stacked columns

​Show percentages

​Options

​Related

When to use

Grouped columns

Single series

Sorted columns

Stacked columns

Stack totals

100% stacked columns

Show percentages

Options

Related