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

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): 
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. 
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: 
const config: GraphConfig = {
  type: 'barStacked',
  dataLabels: {
    showStackTotals: true
  },
  data: { /* ... */ }
};

​
100% stacked bars

Normalise each bar to 100% to show relative proportions rather than absolute values. 
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: 
const config: GraphConfig = {
  type: 'barStackedFill',
  dataLabels: {
    showDataLabels: true,
    dataLabelFormat: 'percentage'
  },
  data: { /* ... */ }
};

​
Options

​
options.sortBars
boolean
default:"false"
Sort bars in descending order by value. Only applies to single-series grouped bar charts (type: 'bar').