Charts your editor can actually build.

Overview

Charts Pro is an interactive data-visualisation module for HubSpot CMS. It renders six chart types — bar, horizontal bar, line, area, pie and donut — as pure SVG, drawn in the browser with dependency-free vanilla JavaScript. You enter data right in the HubSpot editor through repeater fields; charts animate on scroll, show tooltips on hover, and every visual property is a Style-tab field. No code, no spreadsheets, no external APIs.

Chart types

• Bar (vertical) — chunky rounded bars with a configurable corner radius; single or multi-series grouped side by side.
• Horizontal bar — the same, rotated: labels on the Y axis, bars grow left to right. Great for rankings.
• Line — smooth curved or straight lines with hover dots that appear on interaction; multi-series renders multiple lines.
• Area — a line chart with gradient fills fading top to bottom; multi-series layers translucent gradients.
• Pie — classic arc segments that sweep in clockwise on scroll; a single value renders as a full circle.
• Donut — a pie with a configurable center hole (30–80%) that can display the total value.

Entering data

Simple mode (single series): a repeater of 1–20 rows, each a label and a value. Default rows ship in, so a chart renders the moment you drop it on the page.

Multi-series mode (bar, horizontal bar, line, area): a categories repeater for the X-axis labels plus a datasets repeater (1–5 series), each with a name and comma-separated values. Values are trimmed, stripped of non-numerics, and padded or truncated to match the category count.

Value formatting adds a prefix (e.g. $), a suffix (e.g. %), a thousands separator and an optional percentage in tooltips. An accessible data table can be hidden, shown beneath the chart, or rendered screen-reader-only.

Styled entirely from the editor

Nothing is hardcoded — 48 Style fields across nine groups:

• Container — max width, padding, background, border, radius, shadow, chart height.
• Colors — a palette selector plus heading, subheading and text colors; "Custom" unlocks eight individual color pickers.
• Grid & axes — grid line color, width, axis line color, label sizes and colors.
• Typography — a base font picker (inherits your theme) and sizes for heading, subheading, data labels and legend.
• Tooltip — background, text, radius, font size and shadow.
• Legend — dot size, gap, color and hover opacity.
• Data table — header, borders, alternating rows, font size and radius.
• Spacing & responsive — section padding and a tablet breakpoint.

Color palettes

Nine palettes are built in — Default (blue), Ocean, Sunset, Forest, Violet, Monochrome, Corporate, Pastel and Bold. Pick one and colors auto-assign to your data, cycling if you have more than eight items. Choose Custom for eight manual color pickers. Every demo above uses a different palette and font from the same module.

Animation

• Bar / horizontal bar — bars grow from zero to their final size.
• Line / area — the line draws on with a stroke-dashoffset reveal; area gradients fade in.
• Pie / donut — slices reveal with a staggered clockwise sweep.
• Triggered on scroll via IntersectionObserver, and fully disabled when the visitor has prefers-reduced-motion set.

Zero dependencies & accessible

• No libraries — pure vanilla JavaScript, no jQuery, Chart.js or external CDN; every SVG node is created with createElementNS.
• Accessible — ARIA labels on the chart and an optional data-table fallback for screen readers.
• Self-contained — all classes scoped per instance, so multiple charts on one page run independently on any theme, or none.
• Robust data — negative values clamp to 0, Y-axis ticks auto-calculate to nice numbers, non-numeric values become 0.