# Create Grouped Bar chart

### Overview

Grouped column charts (vertical bars) place series side by side within each category, making it easy to compare sub-groups directly. Think of them as mini-clusters of columns per category.

### When to use it

* Comparing metrics across categories and segments simultaneously (e.g., revenue by region and channel).
* Highlighting changes between two states (before/after).
* Visualising survey results split by demographic groups.

Avoid grouped columns if you have more than 4 series per category—the chart becomes dense and hard to read.

### Data requirements

* Categories along the x-axis.
* Multiple series, each representing a sub-category.
* All series share the same categories.

### Style options available

| Group                  | Control                       | Input type | Options                                                                                                              | Description                                                                        |
| ---------------------- | ----------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Colors                 | Color palette                 | palette    | —                                                                                                                    | Palette applied to series; sets the default colours for the chart.                 |
| General → Bars         | Margin between bars (0...1)   | number     | —                                                                                                                    | Relative gap between bars inside one category (0 = touching, 1 = wide spacing).    |
| General → Bars         | Margin between groups (0...1) | number     | —                                                                                                                    | Relative gap between grouped bar clusters.                                         |
| General → Bars         | Round bars, px                | number     | —                                                                                                                    | Radius applied to round off bar or column corners (in pixels).                     |
| General → Bars         | Corners to round              | select     | end, all                                                                                                             | Defines radius for rounding column or bar corners in pixels.                       |
| General → Data labels  | Show data labels              | boolean    | —                                                                                                                    | Shows numeric labels directly on data points.                                      |
| General → Data labels  | Allow labels to overlap       | boolean    | —                                                                                                                    | Allows labels to render even if they collide instead of hiding them automatically. |
| General → Data labels  | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| General → Data labels  | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| General → Data labels  | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| General → Data labels  | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |
| Axes → X Axis          | Show X Axis                   | boolean    | —                                                                                                                    | Shows or hides the X axis line, ticks, and labels.                                 |
| Axes → X Axis          | Base line width               | number     | —                                                                                                                    | Thickness of the axis baseline line in pixels.                                     |
| Axes → X Axis          | Grid line width               | number     | —                                                                                                                    | Thickness of gridlines in pixels.                                                  |
| Axes → X Axis          | Base line color               | color      | —                                                                                                                    | Colour of the axis baseline line.                                                  |
| Axes → X Axis          | Grid line color               | color      | —                                                                                                                    | Colour for gridlines drawn across the chart background.                            |
| Axes → X Axis          | Grid line style               | select     | Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot | Line pattern used for gridlines (solid, dashed, dotted, etc.).                     |
| Axes → X Axis          | Allow labels to overlap       | boolean    | —                                                                                                                    | Allows labels to render even if they collide instead of hiding them automatically. |
| Axes → X Axis          | Show every n'th label         | number     | —                                                                                                                    | Skips labels so only every nth label is drawn.                                     |
| Axes → X Axis          | Rotation of labels            | number     | —                                                                                                                    | Rotation angle applied to axis or data labels in degrees.                          |
| Axes → X Axis          | Opposite side                 | boolean    | —                                                                                                                    | Positions the axis on the opposite side of the chart (top/right).                  |
| Axes → X Axis          | Margin for title              | number     | —                                                                                                                    | Space between the axis title and the axis labels/ticks.                            |
| Axes → Y Axis          | Show Y Axis                   | boolean    | —                                                                                                                    | Shows or hides the Y axis line, ticks, and labels.                                 |
| Axes → Y Axis          | Base line width               | number     | —                                                                                                                    | Thickness of the axis baseline line in pixels.                                     |
| Axes → Y Axis          | Grid line width               | number     | —                                                                                                                    | Thickness of gridlines in pixels.                                                  |
| Axes → Y Axis          | Base line color               | color      | —                                                                                                                    | Colour of the axis baseline line.                                                  |
| Axes → Y Axis          | Grid line color               | color      | —                                                                                                                    | Colour for gridlines drawn across the chart background.                            |
| Axes → Y Axis          | Grid line style               | select     | Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot | Line pattern used for gridlines (solid, dashed, dotted, etc.).                     |
| Axes → Y Axis          | Tick width                    | number     | —                                                                                                                    | Thickness of tick marks in pixels.                                                 |
| Axes → Y Axis          | Tick length                   | number     | —                                                                                                                    | Length of the tick marks in pixels.                                                |
| Axes → Y Axis          | Tick color                    | color      | —                                                                                                                    | Colour of the axis tick marks.                                                     |
| Axes → Y Axis          | Labels alignment              | select     | left, center, right                                                                                                  | Horizontal alignment of axis labels relative to the tick mark.                     |
| Axes → Y Axis          | X offset                      | number     | —                                                                                                                    | Horizontal offset applied to axis labels.                                          |
| Axes → Y Axis          | Y offset                      | number     | —                                                                                                                    | Vertical offset applied to axis labels.                                            |
| Axes → Y Axis          | Type                          | select     | category, linear, logarithmic, datetime                                                                              | Sets the vertical axis scale (category, numeric, logarithmic, or datetime).        |
| Axes → Y Axis          | Opposite side                 | boolean    | —                                                                                                                    | Positions the axis on the opposite side of the chart (top/right).                  |
| Axes → Y Axis          | Margin for title              | number     | —                                                                                                                    | Space between the axis title and the axis labels/ticks.                            |
| Axes → Common          | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| Axes → Common          | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| Axes → Common          | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| Axes → Common          | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |
| Axes → Axes titles     | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| Axes → Axes titles     | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| Axes → Axes titles     | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| Axes → Axes titles     | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |
| Axes → Axes titles     | X Axis margin                 | number     | —                                                                                                                    | Extra padding around the X axis labels for titles.                                 |
| Axes → Axes titles     | Y Axis margin                 | number     | —                                                                                                                    | Extra padding around the Y axis labels for titles.                                 |
| Legend → Main          | Show legend                   | boolean    | —                                                                                                                    | Shows or hides the legend box.                                                     |
| Legend → Main          | Horizontal align              | select     | left, center, right                                                                                                  | Horizontal alignment for the legend box (left, centre, right).                     |
| Legend → Main          | Vertical align                | select     | top, middle, bottom                                                                                                  | Vertical alignment for the legend box (top, middle, bottom).                       |
| Legend → Main          | Layout                        | select     | horizontal, vertical, proximate                                                                                      | Orientation of the legend items (horizontal row, vertical column, or proximate).   |
| Legend → Additional    | Margin for legend             | number     | —                                                                                                                    | Outer margin around the legend box.                                                |
| Legend → Additional    | Margin top for items          | number     | —                                                                                                                    | Top padding inside the legend between items.                                       |
| Legend → Additional    | Margin bottom for items       | number     | —                                                                                                                    | Bottom padding inside the legend between items.                                    |
| Legend → Additional    | Distance between items        | number     | —                                                                                                                    | Horizontal spacing between legend entries.                                         |
| Legend → Style         | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| Legend → Style         | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| Legend → Style         | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| Legend → Style         | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |
| Title → Chart title    | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| Title → Chart title    | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| Title → Chart title    | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| Title → Chart title    | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |
| Title → Chart title    | Margin bottom                 | number     | —                                                                                                                    | Extra space below chart titles or subtitles in pixels.                             |
| Title → Chart subtitle | Font name                     | text       | —                                                                                                                    | Font family used for titles, labels, or legend text.                               |
| Title → Chart subtitle | Font style                    | text       | —                                                                                                                    | Font weight or style (e.g., bold, italic).                                         |
| Title → Chart subtitle | Font size                     | number     | —                                                                                                                    | Font size in pixels for the selected text element.                                 |
| Title → Chart subtitle | Font color                    | color      | —                                                                                                                    | Colour of the text shown for this element.                                         |

> 📐 **Tip:** Keep subgroup order consistent across dashboards (e.g., always left-to-right: Q1, Q2, Q3, Q4) to reinforce pattern recognition.

### Have problems or want to improve this chart type?

Ping us via <hello@chartplugin.com>.