Skip to main content

​
Overview

Bar charts use rectangular bars to represent data values, with bar lengths proportional to the values they represent. They’re one of the most common chart types for comparing data across categories.

​
When to Use

Use bar charts when you need to:
  • Compare values across different categories
  • Show discrete data comparisons
  • Display rankings or frequency distributions
  • Visualize part-to-whole relationships with stacked bars
  • Make side-by-side comparisons with grouped bars

​
Basic Configuration

The bar chart is configured through the BarSeriesOption interface, which extends base bar series options with bar-specific features. 
interface BarSeriesOption {
  type: 'bar'
  coordinateSystem?: 'cartesian2d' | 'polar'
  data?: (BarDataItemOption | OptionDataValue | OptionDataValue[])[]
  barWidth?: number | string
  barMaxWidth?: number | string
  barMinWidth?: number | string
  barGap?: string | number
  barCategoryGap?: string | number
  // ... more options
}

​
Complete Example

import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('main'));

const option = {
  title: {
    text: 'Quarterly Revenue by Region'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  xAxis: {
    type: 'category',
    data: ['North', 'South', 'East', 'West']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Q1',
      type: 'bar',
      data: [120, 200, 150, 80],
      itemStyle: {
        borderRadius: [5, 5, 0, 0]
      }
    },
    {
      name: 'Q2',
      type: 'bar',
      data: [140, 220, 170, 90]
    },
    {
      name: 'Q3',
      type: 'bar',
      data: [160, 240, 190, 100]
    },
    {
      name: 'Q4',
      type: 'bar',
      data: [180, 260, 210, 110]
    }
  ]
};

chart.setOption(option);

​
Key Options

​
coordinateSystem
'cartesian2d' | 'polar'
default:"'cartesian2d'"
The coordinate system for the bar chart. Supports Cartesian (standard bars) and polar (radial bars) systems.
​
barWidth
number | string
Width of the bars. Can be an absolute pixel value or a percentage string.
barWidth: 20      // 20 pixels
barWidth: '60%'   // 60% of available width
​
barMaxWidth
number | string
default:"1"
Maximum width of bars. Defaults to 1 on cartesian coordinate system.
barMaxWidth: 50
​
barMinWidth
number | string
Minimum width of bars.
barMinWidth: 5
​
barMinHeight
number
default:"0"
Minimum height of bars. Useful for ensuring very small values are still visible.
barMinHeight: 2
​
barGap
string | number
default:"'10%'"
Gap between bars in the same category. Can be a percentage string or absolute pixel value. Use '-100%' for overlapping bars.
barGap: '30%'     // 30% gap
barGap: 10        // 10 pixel gap
barGap: '-100%'   // Overlapping bars
​
barCategoryGap
string | number
default:"'20%'"
Gap between categories.
barCategoryGap: '20%'
​
itemStyle
BarItemStyleOption
Visual style of the bars, including border radius support.
itemStyle: {
  color: '#5470c6',
  borderRadius: [5, 5, 0, 0],  // Top-left, top-right, bottom-right, bottom-left
  borderColor: '#000',
  borderWidth: 1
}
​
showBackground
boolean
default:"false"
Whether to show background behind bars.
showBackground: true,
backgroundStyle: {
  color: 'rgba(180, 180, 180, 0.2)'
}
​
backgroundStyle
ItemStyleOption
Style of the bar background when showBackground is enabled.
backgroundStyle: {
  color: 'rgba(180, 180, 180, 0.2)',
  borderColor: null,
  borderWidth: 0,
  borderRadius: 0
}
​
roundCap
boolean
default:"false"
Whether to use rounded caps on both ends of bars. Only available for tangential polar bars.
roundCap: true
​
realtimeSort
boolean
default:"false"
Enable real-time sorting of bars, useful for creating racing bar chart animations.
realtimeSort: true
​
stack
string
Stack bars with the same stack value.
stack: 'total'  // All series with stack: 'total' will be stacked
​
sampling
string
Sampling strategy for large datasets: 'average', 'max', 'min', 'sum', 'lttb'.
large: true,
largeThreshold: 400,
sampling: 'max'
​
clip
boolean
default:"true"
Whether to clip bars that overflow the coordinate system. Only available on cartesian2d.
​
label
BarSeriesLabelOption
Label configuration for bars. Supports special positions for polar bars.
label: {
  show: true,
  position: 'top',  // 'top' | 'inside' | 'insideTop' | 'bottom' | 'left' | 'right'
  formatter: '{c}'
}

​
Data Format

Bar chart data supports multiple formats: 
// Simple array of values
data: [120, 200, 150, 80, 70]

// Array of value arrays
data: [[0, 120], [1, 200], [2, 150]]

// Array of data item objects
data: [
  {
    value: 120,
    name: 'North',
    itemStyle: {
      color: '#91cc75',
      borderRadius: [10, 10, 0, 0]
    }
  },
  { value: 200, name: 'South' },
  { value: 150, name: 'East' }
]

​
Advanced Features

​
Stacked Bar Chart

series: [
  {
    name: 'Product A',
    type: 'bar',
    stack: 'total',
    data: [120, 132, 101, 134, 90]
  },
  {
    name: 'Product B',
    type: 'bar',
    stack: 'total',
    data: [220, 182, 191, 234, 290]
  }
]

​
Horizontal Bar Chart

Swap x and y axes: 
xAxis: {
  type: 'value'
},
yAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
series: [{
  type: 'bar',
  data: [120, 200, 150, 80, 70]
}]

​
Bar Chart with Background

series: [{
  type: 'bar',
  data: [120, 200, 150, 80, 70],
  showBackground: true,
  backgroundStyle: {
    color: 'rgba(180, 180, 180, 0.2)',
    borderRadius: [5, 5, 0, 0]
  }
}]

​
Racing Bar Chart

series: [{
  type: 'bar',
  realtimeSort: true,
  data: [/* dynamic data */],
  animationDuration: 300,
  animationDurationUpdate: 300
}]

​
Source Reference

The bar chart implementation can be found in:
  • Series model: src/chart/bar/BarSeries.ts:96-169
  • Base bar series: src/chart/bar/BaseBarSeries.ts:84-215
  • Default options: src/chart/bar/BarSeries.ts:138-167
  • Type definitions: src/chart/bar/BarSeries.ts:49-94

Build docs developers (and LLMs) love

Get started for freeTalk to us