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
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?