How to adjust the column spacing of a bar chart
Tags: visactor, vchart
Published: 2024-04-26 09:30:03

---
title: How to adjust the column spacing of a bar chart
published: true
description: 
tags: Visactor,VChart
---

## Title

How to adjust the column spacing of a bar chart?

  


## Description

How to adjust the column spacing of a bar chart?

## Solution

The following configuration is provided on VChart for adjusting column spacing:

1.  In terms of `axes` configuration, the `paddingInner` and `paddingOuter` properties are provided for axes of type `type: 'band'`, which are used to configure the spacing within and outside the group
1.  For grouped bar charts, you can also use the `barGapInGroup` property to adjust the bar spacing within each group in the grouped bar chart. You can set absolute pixel values or use percentages (such as' 10% ').

## Code Example

### `barGapInGroup`

```
const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { type: 'Autocracies', year: '1930', value: 129 },
        { type: 'Autocracies', year: '1940', value: 133 },
        { type: 'Autocracies', year: '1950', value: 130 },
        { type: 'Autocracies', year: '1960', value: 126 },
        { type: 'Autocracies', year: '1970', value: 117 },
        { type: 'Autocracies', year: '1980', value: 114 },
        { type: 'Autocracies', year: '1990', value: 111 },
        { type: 'Autocracies', year: '2000', value: 89 },
        { type: 'Autocracies', year: '2010', value: 80 },
        { type: 'Autocracies', year: '2018', value: 80 },
        { type: 'Democracies', year: '1930', value: 22 },
        { type: 'Democracies', year: '1940', value: 13 },
        { type: 'Democracies', year: '1950', value: 25 },
        { type: 'Democracies', year: '1960', value: 29 },
        { type: 'Democracies', year: '1970', value: 38 },
        { type: 'Democracies', year: '1980', value: 41 },
        { type: 'Democracies', year: '1990', value: 57 },
        { type: 'Democracies', year: '2000', value: 87 },
        { type: 'Democracies', year: '2010', value: 98 },
        { type: 'Democracies', year: '2018', value: 99 }
      ]
    }
  ],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  legends: {
    visible: true,
    orient: 'top',
    position: 'start'
  },
  barWidth: 10,
  barGapInGroup: 0
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

### `paddingInner`

```
const spec = {
  type: 'bar',
  color: ['#becef3', '#6a8edc', '#77caeb', '#52c93b', '#d3f5e8'],
  data: [
    {
      id: 'barData',
      values: [
        { type: 'A', year: '2000', value: 25 },
        { type: 'A', year: '2010', value: 28 },
        { type: 'A', year: '2018', value: 18 },
        { type: 'B', year: '2000', value: 23 },
        { type: 'B', year: '2010', value: 32 },
        { type: 'B', year: '2018', value: 22 },
        { type: 'C', year: '2000', value: 18 },
        { type: 'C', year: '2010', value: 18 },
        { type: 'C', year: '2018', value: 18 },
        { type: 'D', year: '2000', value: 15 },
        { type: 'D', year: '2010', value: 22 },
        { type: 'D', year: '2018', value: 19 },
        { type: 'E', year: '2000', value: 5 },
        { type: 'E', year: '2010', value: 12 },
        { type: 'E', year: '2018', value: 5 }
      ]
    }
  ],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  axes: [
    {
      orient: 'bottom',
      paddingInner: 0.3
    }
  ],
  bar: {
    style: {
      fillOpacity: 0.9
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
```

## Results

-   `barGapInGroup`: https://visactor.io/vchart/demo/bar-chart/group-bar-with-barGapInGroup
-   `paddingInner`: https://visactor.io/vchart/demo/bar-chart/group-bar-with-padding

  


## Related Documents

* Demo：
  + https://visactor.io/vchart/demo/bar-chart/group-bar-with-barGapInGroup
  + https://visactor.io/vchart/demo/bar-chart/group-bar-with-padding

* API：
  + https://visactor.io/vchart/option/barChart-axes-band#paddingInner(number%7Cnumber%5B%5D)
  + https://visactor.io/vchart/option/barChart-axes-band#paddingOuter(number%7Cnumber%5B%5D)
  + https://visactor.io/vchart/option/barChart#barGapInGroup

* GitHub：github.com/VisActor/VChart/