Create Grouped Bar chart

Everything you need to know to create the chart you want.

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 [email protected].

Last updated

Was this helpful?