Skip to main content
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').