Data Chart | SaaSFlow Docs

69 settingsPagesBlog postsBlog listings

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

Setting Type What it does

Eyebrow Text Short label above the heading. Leave empty to hide it.

Heading Text Heading beside the chart. Wrap words in [brackets] to highlight them. Leave empty for the chart alone.Default: Line chart

Description Rich text Text under the heading.

Tag label Text Small tag before the use cases. Leave empty to hide the tag.Default: Best for

Use cases Text What this chart suits, shown after the tag. Leave empty to hide the line.Default: Time series data, growth, trends

Button text Text Text on an optional button under the text. Leave empty to hide it.

Button link Link Where the button goes.

Button: HubSpot CTA ID Text Optional. To use a HubSpot CTA instead of the button (so HubSpot tracks its views and clicks), paste the CTA's ID here. Find it in Marketing > CTAs: open the CTA and copy the number from the page address. Needs HubSpot's CTA tool. Leave empty to use the button.

ChartGroup · 16 settings

The chart is drawn from the numbers below when the page loads. No charting library is downloaded, so it stays fast.

Chart type Choice How the data is drawn. The fields below explain what each type reads.Options: Line chartArea chartBar chartHorizontal bar chartHistogramPie chartDoughnut chartScatter plotBubble chartHeatmapDefault: Line chart

Card title Text Title at the top of the chart card. Leave empty to hide it.Default: Website Visitors

Period label Text Small label at the top right, for example This month. Leave empty to hide it.Default: Last 12 months

Labels Text Comma-separated. Line, area, bar and histogram: the labels along the bottom. Horizontal bar, pie and doughnut: the name of each bar or slice. Heatmap: the column labels (leave gaps empty, e.g. 12 AM,,,,4 AM). Not used by scatter or bubble.Default: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

Data seriesRepeater · 2 settings

Numbers separated by commas, without thousands separators (12450, not 12,450). Line and area: one line per series. Bar: several series sit side by side. Horizontal bar, histogram, pie and doughnut: the first series only. Scatter: x:y pairs (2.5:14). Bubble: x:y:size, one series per group. Heatmap: one series per row. Colors come from Styles > Chart colors, in order.

Name	Text	Shown in the legend and the hover labels. Heatmap: the row label.Default: `Series`
Values	Text	Comma-separated numbers (see the help above for scatter and bubble).

Highest value on the scale Number Leave empty to fit the scale to your data.

Highest value along the bottom Number Scatter and bubble. Leave empty to fit it to your data.

Bottom axis title Text For example Session Duration (minutes). Leave empty to hide it.

Side axis title Text For example Page Views. Leave empty to hide it.

Value prefix Text Added before numbers, for example $.

Value suffix Text Added after numbers, for example %.

Highlighted point Number Line and area: the point number (1 = first) that shows a value label. 0 hides it.Default: 8

Highlight label Text Small text above the highlighted value. Leave empty to use the point's label.Default: Aug 2024

Center number Text Large number in the middle of the doughnut. Leave empty to hide it.Default: 125,430

Center label Text Text under the center number.Default: Total Users

Data table caption Text The chart's numbers are also given as a table that screen readers read. This is its caption.Default: Chart data

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

Setting Type What it does

Layout Choice Where the heading and text sit. On phones the text always comes first.Options: Text left, chart rightChart left, text rightText above the chartChart onlyDefault: Text left, chart right

Text width Number Share of the row the text takes beside the chart.Default: 34

Color mode Choice "Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site

Eyebrow style Choice "Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme

Highlight color Color Color of [highlighted] words and the tag. Starts as the theme's primary color.

FontsGroup · 2 settings

Heading font	Font	Starts as the theme's heading font. Change it to use another font in this module only.Default: `Outfit`
Text font	Font	Starts as the theme's body font. Change it to use another font in this module only.Default: `Inter`

Transparent background On/off Removes this section's background so the page background shows through. Useful for blending sections together.Default: Off

Background color Color Leave empty to use the theme colors for the current light or dark mode.

Background effectGroup · 6 settings

Show background glow	On/off	Default: `Off`
Intensity	Number	How strong the glow is. 0% hides it.Default: `60`
Flowing movement	On/off	Plays an entrance animation. Visitors who turn off motion on their device don't see it.Default: `On`
Fade out at the top and bottom	On/off	Fades the glow out at the edges so it blends into the next section.Default: `On`
Glow color 1	Color	Leave empty to use the theme primary color.
Glow color 2	Color	Leave empty to use the theme accent color.

Background animation Choice A subtle moving background behind this section. Soft bubbles: glass circles floating. Aurora: large blurred color clouds drifting. Dot grid: a faint dotted pattern drifting. Ripples: soft rings spreading out. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None

Animation strength Number How visible the background animation is. Lower is subtler.Default: 45

Number of bubbles Number How many bubbles float in this section. Phones show about half of them.Default: 6

Bubble arrangement Number 0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0

ChartGroup · 6 settings

Chart height	Number	Height of the plotting area on desktop. Pie and doughnut size themselves.Default: `220`
Smooth lines	On/off	Line and area: curved lines instead of straight segments.Default: `On`
Show grid and scale	On/off	Guide lines and the numbers up the side.Default: `On`
Show legend	On/off	The color key, with values for bar, pie and doughnut charts.Default: `On`
Show card	On/off	A white card with a border and soft shadow around the chart.Default: `On`
Line above the section	On/off	A thin line at the top, useful when several charts are stacked.Default: `Off`

Chart colorsGroup · 6 settings

Used in turn for series, bars and slices without their own color. Color 1 starts as the theme's primary color.

Color 1	Color	First series or slice.
Color 2	Color	Second series or slice.Default: `#3B82F6`
Color 3	Color	Third series or slice.Default: `#A855F7`
Color 4	Color	Fourth series or slice.Default: `#EC4899`
Color 5	Color	Fifth series or slice.Default: `#F472B6`
Color 6	Color	Sixth series or slice.Default: `#FDBA74`

SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)	Number	Space above the content on desktop.
Bottom padding (desktop)	Number	Space below the content on desktop.
Top padding (mobile)	Number	Space above the content on phones.
Bottom padding (mobile)	Number	Space below the content on phones.

Animate when scrolled into view On/off Text rises in and bars and lines draw in as the section scrolls into view. Visitors who turn off motion see them still.Default: On

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.