Understanding Bar Charts in ECharts

Bar charts, also known as column charts, visually represent data using rectangular bars whose lengths or heights are proportional to the values they represent. In ECharts, bar charts are configured by setting type: 'bar' in a series definition within the chart options.

Basic Configuration

A minimal bar chart requires three core components:

• xAxis: Typically configured as a category axis (type: 'category') with discrete labels.
• yAxis: Usually a value axis (type: 'value') for quantitative measuremenst.
• series: An array containing at least one object with type: 'bar' and associated data.

<div id="chart-container" style="width:600px;height:400px"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
  const chart = echarts.init(document.getElementById('chart-container'));
  
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar'
    }]
  };
  
  chart.setOption(option);
</script>

Horizontal Bar Charts (Bar vs Column)

To create a horizontal bar chart (often called a bar chart as opposed to a vertical column chart), swap the axis types:

• Set yAxis.type = 'category' with category labels
• Set xAxis.type = 'value'

const option = {
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  xAxis: { type: 'value' },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar'
  }]
};

Stacked Bar Charts

Stacked bar charts combine multiple data series in to single bars, showing part-to-whole relationships. Enable stacking by assigning the same stack identifier to related series:

const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Fruits',
      type: 'bar',
      stack: 'total',
      data: [820, 912, 899, 786, 1290, 1330, 1320]
    },
    {
      name: 'Vegetables',
      type: 'bar',
      stack: 'total',
      data: [840, 1002, 789, 934, 1090, 1728, 1468]
    },
    {
      name: 'Groceries',
      type: 'bar',
      stack: 'total',
      data: [780, 340, 879, 624, 1588, 1624, 1890]
    }
  ],
  legend: { show: true }
};

Polar Coordinate Bar Charts

ECharts supports bar charts in polar coordinates, but requires one axis to be categorical. Typically, the angle axis represents categories while the radius axis shows values:

const option = {
  polar: {},
  angleAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  radiusAxis: { type: 'value' },
  series: [{
    coordinateSystem: 'polar',
    type: 'bar',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }]
};

Stacked polar bar charts work similarly by adding multiple series with the same stack property and coordinateSystem: 'polar'.

Large Dataset Optimization

For datasets with thousands of points, enable progressive rendering to maintain performance:

const option = {
  xAxis: { type: 'category', data: largeCategoryArray },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: largeValueArray,
    large: true,
    largeThreshold: 1000
  }]
};

When large is enabled and data exceeds largeThreshold, ECharts renders data in batches to prevent UI freezing.