Create Multitype chart

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

Overview

Multitype charts combine different series types (e.g., columns and lines) in one visual. They help compare metrics with different units or storytelling roles within a single frame.

When to use it

  • Pairing a primary measure (columns) with a trend or target line.

  • Showing actual vs. cumulative metrics (e.g., revenue bars with running total line).

  • Combining bars with scatter points to highlight outliers.

Avoid multi-type charts if you can tell the story with a single chart typeβ€”simplicity wins when the message is straightforward.

Data requirements

  • Shared categories across all series.

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 β†’ Line and Area

Line width

number

β€”

Default line thickness for series that inherit from this setting.

General β†’ Line and Area

Line style

select

Solid, Dash, Dot

Dash pattern applied to lines.

General β†’ Line and Area

Show dots

boolean

β€”

Shows markers for the default series configuration (affects multiple chart types).

General β†’ Line and Area

Radius of dots

number

β€”

Radius of default series markers when enabled.

General β†’ Line and Area

Fill opacity (0...1)

number

β€”

Opacity of the shared series fill (used by charts that inherit from series defaults).

General β†’ Column

Stacking

select

normal, none

Stacking mode for the series (normal/percent/none).

General β†’ Column

Margin between bars (0...1)

number

β€”

Relative gap between bars inside one category (0 = touching, 1 = wide spacing).

General β†’ Column

Margin between groups (0...1)

number

β€”

Relative gap between grouped bar clusters.

General β†’ Column

Round bars, px

number

β€”

Radius applied to round off bar or column corners (in pixels).

General β†’ Column

Corners to round

select

end, all

Defines radius for rounding column or bar corners in pixels.

General β†’ Column

Color each column

boolean

β€”

Assigns a unique colour to every column instead of sharing a palette per series.

General β†’ Column

Margin between stacked bars

number

β€”

Gap between stacked series blocks when columns are grouped.

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

Tick width

number

β€”

Thickness of tick marks in pixels.

Axes β†’ X Axis

Tick length

number

β€”

Length of the tick marks in pixels.

Axes β†’ X Axis

Tick color

color

β€”

Colour of the axis tick marks.

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

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.

Have problems or want to improve this chart type?

Ping us via [email protected].

Last updated

Was this helpful?